从工具栏运行内容脚本

Run Content Script From Toolbar

本文关键字：脚本 运行 工具栏      更新时间：2023-09-26

我想要一个Chrome扩展程序来替换页面上的文本。我已经让所有代码都在 Javascript 方面工作，并且在页面加载时它可以完美运行，问题是我只希望它在您单击工具栏上的按钮时替换页面上的文本。

我在工具栏上设置了一个按钮，但替换的 Javascript 仍然只在页面加载时运行，而不是在您单击按钮时运行。此外，当您单击工具栏按钮时，尽管它没有执行任何操作，但它仍然显示弹出窗口的闪烁。我希望它做的只是在单击工具栏按钮时运行文本替换代码，而不显示弹出窗口.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"]
    }
  ]
}

弹出窗口.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!!!');

弹出窗口.html - 空白

背景.html

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

您必须进行一些更改（rsanchez 提到了其中的大部分 - 但不是全部），并且可以/应该进行更多更改。

因此，我将演示一个可以/应该/必须更改的内容

，而不是列出可以/应该/必须更改的内容。

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

  • 清单文件格式
  • 权限
  • 背景页面、活动页面
  • 内容脚本
  • 浏览器操作

扩展目录结构：

          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"
    ]
}

背景.js：

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

内容.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 !!!");

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

  • 删除content_scripts部分。
  • 删除browser_action.popup条目。
  • 添加部分："permissions": ["activeTab"]
  • 将"background"部分更改为："background": { "scripts": ["background.js"] }并将文件background.html重命名为 background.js
相关文章：