web-dev-qa-db-ja.com

Chrome Extensionのコンテンツスクリプトのデバッグ

一般的な質問

こんにちは！私はChrome Extensionsの世界を掘り下げており、ワークフロー全体をダウンさせるのにいくつかの問題があります。 and background.html。これに参加して、ほとんどの拡張ロジックをコンテンツスクリプトに渡す必要があることを意味します。

Googleのイベントページ入門 では、manifest.jsonファイルにリストされているコンテンツスクリプトがあります。ただし、イベントページのサンプル拡張では、background.jsの次のコードブロックを介して取り込まれます：chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

他の方法よりも1つの方法で行うことの利点は何ですか？

私のコード

Googleの例のように、コンテンツスクリプトをプログラムで挿入する方法を進めています。

manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let's get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

content.js

console.log('you\'r in the world of content.js');
var ans = {};

ans.createSidebar = function() {

    return {
        init: function(){
            alert("why hello there");
        }
    }
}();

ans.createSidebar.init();

最初の3つのconsole.logステートメントを取得して、バックグラウンドページのデバッガーに表示できます。また、content.jsからアラートを取得して、任意のWebサイトに表示することもできます。しかし、content.jsからconsole.logを表示することも、content.jsからJSを表示することもできません。バックグラウンドページデバッガーの[ソース]タブの[コンテンツスクリプト]セクションを調べてみました。 SO）に関する他のいくつかの投稿では、表示するためにdebugger;ステートメントを追加することを提案していますが、私は何も運がありません。 この投稿 、ただし、マニフェストにコンテンツスクリプトをリストすることによって行われます。

任意の助けをいただければ幸いです。ありがとう！

debugginggoogle-chrome-extensiongoogle-chrome-devtoolscontent-script
43
NoR

コンテンツスクリプトのconsole.logメッセージは、バックグラウンドページのインスペクターではなく、Webページのコンソールに表示されます。

debugger;の追加は、開発者ツール（コンテンツスクリプトが挿入されるWebページ用）が開いている場合に機能します。

したがって、この場合、ブラウザーのアクションアイコンをクリックする前に、まず（Webページの）開発者ツールをアクティブにする必要があります。すべて正常に動作するはずです。

59
方 觉

debuggermethodを使用しようとしましたが、プロジェクトがrequire.jsを使用してjavascriptファイルをバンドルしているため、うまく機能しません。

chrome拡張機能の開発にrequire.jsも使用している場合は、コードベースに this のようなものを追加して、eval(xhr.responseText)からeval(xhr.responseText + "\n//@ sourceURL=" + url);へ（このように question ）

その後、開発ツールでソースファイルを見ることができます（ただし、背景のhtmlウィンドウは表示されません）

2
fengshuo