0

ページ上のテキストを置き換える Chrome 拡張機能が必要です。すべてのコードは Javascript 側で動作しており、ページが読み込まれると完全に実行されます。問題は、ツールバーのボタンをクリックしたときにページ上のテキストを置き換えることだけです。

ツールバーにボタンを設定しましたが、代わりの Javascript は、ボタンをクリックしたときではなく、ページが読み込まれたときに実行されます。さらに、ツールバーのボタンをクリックした瞬間に、何もしていないにもかかわらず、ポップアップ ウィンドウのフラッシュが表示されます。私がやりたいことは、popup.html ボックスを表示せずに、ツールバー ボタンをクリックしたときにテキスト置換コードを実行することだけです。

現在のコードは次のとおりです。

マニフェスト.json

{
  "name": "Browser Action",
  "version": "0.0.1",
    "manifest_version": 2,
  "description": "Show how options page works",
  // Needed to retrieve options from content script
  "background": "background.html",

  // This is how you load Browser Action. Nearly equal to Page one.
  "browser_action": {
      "default_icon": "icon.png",
      "popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js" : ["popup.js"]
    }
  ]
}

popup.js

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            var r = new RegExp(a, 'gi');
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

htmlreplace('a', 'IT WORKS!!!');

popup.html - 空白

background.html

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "popup.js"});
});
4

2 に答える 2

1

いくつかの変更を加える必要があります (そのほとんどは rsanchez によって言及されていますが、すべてではありません)。

したがって、変更できる/変更する必要がある/変更する必要があるものをリストする代わりに、必要なことを行うサンプル拡張機能を示します。

まず最初に - 質問/問題に関連するいくつかの重要な概念に関する詳細情報:

拡張機能のディレクトリ構造:

          extension-root-directory/
           |_____manifest.json
           |_____background.js
           |_____content.js

マニフェスト.json:

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": true,

    "background": {
        "persistent": false,
        "scripts": ["./bg/background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension"
        //"default_icon": {
        //    "19": "img/icon19.png",
        //    "38": "img/icon38.png"
        //},
    },

    "permissions": [
        "activeTab"
    ]
}

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, { file: "content.js" });
});

content.js:

function htmlReplace(a, b, element) {
    if (!element) {
        element = document.body;
    }

    var r = new RegExp(a, "gi");
    var nodes = element.childNodes;
    for (var n = 0; n < nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlReplace(a, b, nodes[n]);
        }
    }
}
htmlReplace("a", "IT WORKS !!!");
于 2013-11-13T13:21:30.887 に答える