5

この単純な拡張機能があり、クロムのツールバーにアイコンが表示され、有効化/無効化ボタンが表示されます。ボタンに機能を追加して、content_script.jsGoogle Web サイトにアクセスしたときに起動する機能を無効または有効にしたい:

popup.js

var setLayout = function(){
    var list = document.createElement('ul');

    var enable = document.createElement('li');
    enable.appendChild(document.createTextNode('Enable Script'));
    enable.onclick = function(){toggle(0)};

    var disable = document.createElement('li');
    disable.appendChild(document.createTextNode('Disable Script'));
    disable.onclick = function(){toggle(1)};

    list.appendChild(disable);
    document.body.appendChild(list);

    function toggle(n){
        list.removeChild( n == 0 ? enable : disable);
        list.appendChild(n == 0 ? disable : enable);
    }
};

document.addEventListener('DOMContentLoaded', setLayout, false);

マニフェスト.json

{
  "manifest_version": 2,

  "name": "test",
  "description": "test",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.google.co.uk/"],
      "js": ["content_scripts.js"]
    }
  ]
}

content_scripts.js

(function(){
    alert('hello');
})();

私はGoogle拡張機能を初めて使用し、その方法がわかりません。無効/有効ボタンをクリックした後にマニフィストを変更することを考えましたが、Google Webサイトのドキュメントを読んだ後、適切なコマンドを見つけることができませんでした!

どんな助けでも大歓迎です。

4

2 に答える 2

2

backround pagesいくつかの調査の後、sendMessageとを使用してこれを解決する方法を見つけましたlocalstorage。

background pagesと の間のコミュニケータとして機能します。これらは 2 つの異なるドキュメント上にpopup.jsありcontent_scripts.js、それらの間で変数を直接渡すことはできません。

私が追加したマミフェストで背景ページを有効にするには：

"background": {
"scripts": ["background.js"],
"persistent": true
},

localstorage変数をローカルに保存し、ブラウザーを閉じて再度開いた場合でもそれらを記憶するようにします。そのため、有効化/無効化ボタンをクリックすると、 を介してアクセスしてに渡すlocalStorage['status'] = 1/0ことができるように設定されます。background.jscontent_scripts.js

追加した localStorage 変数を設定するにはpopup.js:

if(!localStorage.status) localStorage['status'] = 1;
toggle(2);
enable.onclick = function(){toggle(0)};
disable.onclick = function(){toggle(1)};
function toggle(n){
    if((n == 0) && (enable.parentNode == list)){
        list.removeChild(enable);
        list.appendChild(disable);
        localStorage.status = 1;
    }else if((n == 1) && (disable.parentNode == list)){
        list.removeChild(disable);
        list.appendChild(enable);
        localStorage.status = 0;
    }else if((n == 2) && (!list.hasChildNodes())){
        list.appendChild((localStorage.status == 1) ? disable : enable);
        chrome.browserAction.setIcon({path: (localStorage.status == 1) ? "icons/icon19.png" : "icons/icon19_disabled.png"});
    }else{
        return;
    }
}

に渡すlocalStorage.statusには、ロードされた送信要求メッセージをにcontent_scripts.js使用sendMessageし、要求をリッスンして応答を値とともに送信する必要がありました。content_scrips.jsbackground.jsonMessagebackground.jscontent_scripts.jslocalStorage.status

background.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type == "status") sendResponse({status: localStorage.status});
});

content_scripts.js

var fn = function(){...};
chrome.runtime.sendMessage({type: "status"}, function(response) {
    if(response.status == 1) fn();
    return;
});

それだけです。誰かが役に立つことを願っています。

于 2013-06-20T17:17:28.233 に答える