如何切换浏览器操作的动作？ [英] How to toggle actions of a browser action?

问题描述

我创建了我的第一个Chrome扩展，它将事件处理程序添加到单击页面上的所有锚点元素。如果用户第二次点击图标，事件处理程序将重新附加到锚点元素并执行两次。
我需要的内容

• 点击浏览器操作。


• 将事件添加到定位元素


• 如果可能，请在浏览器操作图标中添加一个视觉提示，指明该扩展当前处于活动状态。


• 再次点击扩展名应删除事件处理程序，并再次显示扩展图标为禁用。

这可能吗？

以下是我迄今为止所尝试的内容。

manifest.json

  {
name：NameExtension，
version：1.0，
description： ，
manifest_version：2，
browser_action：{
default_icon：16x16.png
}，
background：{
scripts：[background.js] 
}，
permissions：[
tabs，http：// * / *，https： // * / *

} 
  

背景。 Ĵ s

  chrome.browserAction.onClicked.addListener（function（tab）{
 chrome.tabs。 executeScript（null，{file：contentscript.js}）; 
}）; 
  

contentscript.js

  var all = document.getElementsByTagName（'a'）; 
 for（var i = 0; i< all.length; i ++）{
 all [i] .addEventListener（'click'，myHandler，false）; 
} 
 
 myHandler = function（event）{
 alert（event.target.innerText）; 
} 
  

我想要在点击extension_browser_action时将上述处理程序切换到锚点上并重新点击。此外，如果extension_browser-action_icon可以给出有关状态的一些视觉反馈。

解决方案

background.js其中contentcript添加处理程序和togglecontentscript删除它们。

  var x = false; 
 disableBrowserAction（）; 
 
 function disableBrowserAction（）{
 chrome.browserAction.setIcon（{path：inactive.png}）; 
 chrome.tabs.executeScript（null，{file：togglecontentscript.js}）
} 
 
 function enableBrowserAction（）{
 chrome.browserAction.setIcon（ {路径： active.png}）; 
 chrome.tabs.executeScript（null，{file：contentscript.js}）; 
 
 
函数updateState（）{
 if（x == false）{
 x = true; 
 enableBrowserAction（）; 
} else {
 x = false; 
 disableBrowserAction（）; 
} 
} 
 
 chrome.browserAction.onClicked.addListener（updateState）; 
  

I have created my first chrome extension which adds event handlers to all the anchor elements on the page on clicking. If the user clicks the icon second time the event handlers are reattached to the anchor elements and are executed twice. What I need following

• Click the browser action.
• Add the events to the anchor elements
• If possible give a visual cue in the browser action icon that the extension is active currently.
• Clicking again on the extension should remove the event handlers and again shows the extension icon as disabled.

Is this possible?

Following is what I have tried till now.

manifest.json

{
    "name":"NameExtension",
    "version":"1.0",
    "description":"Here goes the description",
    "manifest_version":2,
    "browser_action":{
        "default_icon":"16x16.png"
    },
    "background":{
        "scripts":["background.js"]
    },
    "permissions":[
        "tabs","http://*/*","https://*/*"
    ]
}

background.js

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

contentscript.js

var all = document.getElementsByTagName('a');
for(var i=0; i<all.length;i++){
    all[i].addEventListener('click',myHandler, false);
}

myHandler = function(event){
    alert(event.target.innerText);
}

I would want the above handler to be toggled on anchors as the extension_browser_action is clicked and re-clicked. Also if the extension_browser-action_icon can give some visual feedback regarding the state.

解决方案

I was able to do this with following in my background.js where contentscript adds the handlers and togglecontentscript removes them.

var x = false;
disableBrowserAction();

function disableBrowserAction(){
    chrome.browserAction.setIcon({path:"inactive.png"});
    chrome.tabs.executeScript(null, {file: "togglecontentscript.js"})
}

function enableBrowserAction(){
    chrome.browserAction.setIcon({path:"active.png"});
    chrome.tabs.executeScript(null, {file: "contentscript.js"});
}

function updateState(){
    if(x==false){
        x=true;
        enableBrowserAction();
    }else{
        x=false;
        disableBrowserAction();
    }
}

chrome.browserAction.onClicked.addListener(updateState);

这篇关于如何切换浏览器操作的动作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！