如何在谷歌扩展中打开/关闭content_scripts

how do i toggle on/off content_scripts in a google extension?

本文关键字：关闭 content scripts 谷歌 扩展      更新时间：2023-09-26

我有这个简单的扩展名，它在chrome的工具栏上显示图标并显示启用/禁用按钮。 我想在按钮中添加功能以禁用或启用在访问Google网站时触发的content_script.js：

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

manifest.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');
})();

我是谷歌扩展程序的新手，不知道该怎么做，我想在单击禁用/启用按钮后更改 manifist，但在阅读 Google 网站上的文档后找不到正确的命令！

任何帮助将不胜感激。

经过一些研究，我想出了如何使用backround pages、sendMessage和localstorage来解决这个问题。

background pages作为popup.js和content_scripts.js之间的沟通者，它们在两个不同的文档上，不可能直接在它们之间传递变量。

为了在 mamifest 中启用背景页面，我添加了：

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

localstorage在本地保存变量，即使在浏览器关闭并再次打开时也会记住它们，因此当单击启用/禁用按钮时，它会设置localStorage['status'] = 1/0可以通过background.js访问并传递给content_scripts.js。

要设置我添加到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我必须在加载content_scrips.js上向background.js发送请求消息时使用sendMessage，在background.js上使用onMessage localStorage.status值向content_scripts.js发送响应。

背景.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;
});

就是这样，希望有人觉得有用。

尝试使用代码而不是清单文件注入内容脚本，如下所示：

chrome.tabs.executeScript(null, {file: "content_script.js"});

然后，可以使用后台页面和内容脚本之间的消息传递来决定是否注入内容脚本，或者内容脚本本身中的 if 语句，该语句仅在扩展的操作按钮设置标志时运行。

可以使用浏览器操作事件来检测何时按下操作按钮。

相关文章：