3

JQuery がクロム拡張機能でどのように機能するかを確認するために、テスト用のクロム拡張機能を開発しようとしています。提供されたコードから、ポップアップの背景を黄色に変更する必要があると思います。

コンテンツ スクリプトとバックグラウンドを使用して jquery.js をロードしようとしました。バックグラウンド スクリプト コマンドでロードすると、jquery.js がロードされたことが示されます。

ここに私のファイルがあります：

マニフェスト.json

    {
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My first Chrome extension.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "content.js"]
    }
  ]
}

popup.html

    <html>
  <head>
    <script src='jquery.js'></script>
    <script src='content.js'></script>
  </head>
</html>

content.js

$('a').css({'background-color': 'yellow'});

拡張フォルダーにもjquery.jsがあります。誰かがこれを機能させるために何か他のものをくれたり、jquery をリンクする chrome 拡張機能の本当に良い実例を見せてくれたりしたら、それは素晴らしいことです!

4

1 に答える 1

11

一緒にすべきではないものをごちゃまぜにしてしまった。

間違ったことの 1 つ:
ブラウザのアクション ボタンをクリックしたときにポップアップが表示されないようにするため、「default-popup」を指定しないでください。

...
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"   // <-- this line should go away
},
...

そうは言っても、問題に取り組むための最良の方法（imo）は次のとおりです。

  1. background-page (またはできればevent-page ) にchrome.browserAction.onClickedイベントをリッスンさせます。
    (イベントをトリガーするために、default-popup を設定する必要がないことに注意してください。)

  2. その場合は、chrome.tabs.executeScriptを使用して、プログラムによるインジェクションを使用してアクティブなタブのページに挿入jquery.min.jsします。content.js

  3. 前述の手順を実行できるようにするには、必要な権限、つまり拡張機能からアクセスできるページ"tabs"の URL一致パターン"http://*/*"も宣言する必要があります (たとえば、httpおよびhttpsスキーム"https://*/*"を使用するすべてのページにアクセスできるようにするため)。 ）。

また、マニフェストの仕様をよく見て、使用可能なフィールドと可能な値を理解することをお勧めします。

最後に、開始するためのデモ ソース コードをいくつか示します (すべての情報を一度に読むと圧倒される可能性があることは承知しています)。

拡張フォルダーの構造:

       _______________LinkHighlighter_______________
      |                      |                      |
manifest.json               img                     js
                             |                      |__background.js
                        icon<XX>.png(*)             |__content.js
                                                    |__jquery.min.js
(*): <XX> = 16, 19, 38, 48, 128

マニフェスト.json:

{
    "manifest_version": 2,

    "name": "Link Highlighter",
    "version": "1.0",
    "description": "...",
    "icons": {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "browser_action": {
        "default_title": "Link Highlighter",
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        }
    },
    "background": {
        "persistent": false,
        "scripts": ["js/background.js"]
    },

    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

background.js:

// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
    // ...inject 'jquery.min.js' and...
    chrome.tabs.executeScript(tab.id, {
        file: "js/jquery.min.js",
        allFrames: true,
        runAt: "document_idle"
    });
    // ...inject 'content.js' into the active tab's page
    chrome.tabs.executeScript(tab.id, {
        file: "js/content.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

content.js:

$("a").css({ "background-color": "yellow" });

さらに質問や問題がある場合は、お気軽に戻ってきてください :)

完全を期すために...
...他にも可能なアプローチがあることを述べさせてください。

  1. ブラウザ アクションの代わりにページ アクションを使用する。

  2. すべてのページにコンテンツ スクリプトを挿入し、バックグラウンド ページからコンテンツ スクリプトにメッセージを渡すことによって強調表示をトリガーします。

于 2013-10-20T13:04:20.077 に答える