如何在Google扩展程序中开启/关闭content_scripts？ [英] how do i toggle on/off content_scripts in a google extension?

问题描述

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

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）; 
  

manifest.json

  {
manifest_version：2，
 
name：test，
description：test，
版本：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网站上的文档后找不到正确的命令！

任何帮助都将非常感谢。经过一番研究，我发现如何通过使用背景页面来解决这个问题。 ， sendMessage 和 localstorage 。

后台页面用作 popup.js 和 content_scripts.js 之间的通信器，他们是在两个不同的文件，它不可能直接在它们之间传递变量。

要在mamifest中启用后台页面，我添加了：

$ $ p $ codebackground：{
scripts：[background.js]，
persistent：true
} ，


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

设置添加到 popup.js 的localStorage变量：

 <！c $ c> 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; （（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 to content_scripts.js 我必须在 content_scrips上使用 sendMessage .js 其中载入发送请求消息到 background.js 和 onMessage on background.js 它侦听请求，并使用 localStorage.status发送对 content_scripts.js 的响应

background.js：

  chrome.runtime.onMessage.addListener（
 function（request，sender，sendResponse）{$ b $ 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; 
 }）; 
  

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

I have this simple extension, it displays icon on chrome's toolbar and shows a enable/disable button. i want to add function to the button to disable or enable the content_script.js which fires on visiting google website:

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);

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

i'm new to google extensions and have no idea how to do that, i thought about changing the manifist after clicking disable/enable buttons but couldn't find the right command to do so after reading the documentations on google website!

any help would be greately appreciated.

解决方案

After some research i figured out how to solve this by using backround pages, sendMessage and localstorage.

background pages work as a communicator between popup.js and content_scripts.js, they are on two different documents and it's not possible to pass variables between them directly.

To enable background page in mamifest i added:

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

localstorage save variables locally and remember them even when the browser is closed and opened again, so when enable/disable button is clicked it set localStorage['status'] = 1/0 which can be accessed through background.js and passed to content_scripts.js.

To set localStorage variable i added to 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;
    }
}

To pass localStorage.status to content_scripts.js i had to use sendMessage on content_scrips.js which on loaded send request message to background.js, and onMessage on background.js which listens to requests and send response to content_scripts.js with the localStorage.status value.

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;
});

That's it, hope someone find it useful.

这篇关于如何在Google扩展程序中开启/关闭content_scripts？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！