Question

我想要一个可以替换页面上文字的Chrome扩展程序。我已经将所有代码都放在了Javascript方面，并且在页面加载时它运行得很好，问题是当我单击工具栏上的按钮时，我只希望它替换页面上的文本。

我在工具栏上设置了一个按钮，但替换的Javascript仍然只在页面加载时运行，而不是在您单击按钮时运行。此外，当您单击工具栏按钮时，尽管它没有执行任何操作，但它仍然显示弹出窗口的闪烁。我想要它做的就是在单击工具栏按钮时运行文本替换代码，而不显示popup.html框。

目前的代码如下，

的manifest.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"});
});

Answer 1

您只需对清单进行以下更改：

删除content_scripts部分。
删除browser_action.popup条目。
添加一个部分："permissions": ["activeTab"]
将您的background部分改为："background": { "scripts": ["background.js"] }并将文件background.html重命名为background.js

Answer 2

您必须进行一些更改（其中大部分都是由rsanchez提及的 - 但不是全部）以及更多可能/应该的更改。

所以，我不会列出可能/应该/必须更改的内容，而是展示一个可以满足您需求的示例扩展。

首先要做的事情 - 有关您的问题/问题的几个关键概念的更多信息：

的 Manifest File Format

的 Permissions

Background pages ， Event pages

的 Content scripts

的 Browser actions

扩展程序目录结构：

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

<强>的manifest.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 !!!");

从工具栏运行内容脚本

2 个答案: