在Chrome扩展程序中保留页面操作的状态

Question

所以,我有以下代码:

var clicks = 0; // click counter

// Make sure this only runs on facebook
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (tab.url.indexOf("facebook.com") > -1) {
        chrome.pageAction.show(tabId);
    }
});

// Called when the user clicks on the page action.
chrome.pageAction.onClicked.addListener(function(tab) {
  if (clicks == 0) {
    chrome.pageAction.setIcon({path: "dontlike.png", tabId: tab.id}); // Update icon
    chrome.pageAction.setTitle({title: "idontlike", tabId: tab.id}); // Update title
    chrome.tabs.executeScript({ // Hide like buttons
      code: 'var like = document.getElementsByClassName("UFILikeLink"); for (index = 0; index < like.length; ++index) { like[index].style.display="none"; }'
    });
  } 
  else {
    chrome.pageAction.setIcon({path: "like.png", tabId: tab.id}); // Update icon
    chrome.pageAction.setTitle({title: "like", tabId: tab.id}); // Update title
    chrome.tabs.executeScript({ // Show like buttons
      code: 'var like = document.getElementsByClassName("UFILikeLink"); for (index = 0; index < like.length; ++index) { like[index].style.display=""; }'
    });
  }

  // wrap coutner around
  clicks++;
  if (clicks > 1)
    clicks = 0;
});

对于Chrome扩展程序,当点击pageaction图标时,它会隐藏facebook上的所有"赞"按钮.这有效; 但是,无论何时加载新的facebook网址,扩展的状态都会丢失,例如,如果按钮处于不喜欢模式(隐藏所有喜欢的内容),如果我转到新页面,则会重置为相似的模式.

我有一个想法,使用点击计数器来保持扩展的状态,并使代码更具功能,如下所示

var clicks = 0; // click counter

function like() {
  chrome.pageAction.setIcon({path: "like.png", tabId: tab.id}); // Update icon
  chrome.pageAction.setTitle({title: "like", tabId: tab.id}); // Update title
  chrome.tabs.executeScript({ // Show like buttons
    code: 'var like = document.getElementsByClassName("UFILikeLink"); for (index = 0; index < like.length; ++index) { like[index].style.display="none"; }'
  });

  clicks++;
  if (clicks > 1) {
    clicks = 0;
  }
}

function dislike() {
  chrome.pageAction.setIcon({path: "like.png", tabId: tab.id}); // Update icon
  chrome.pageAction.setTitle({title: "like", tabId: tab.id}); // Update title
  chrome.tabs.executeScript({ // Show like buttons
    code: 'var like = document.getElementsByClassName("UFILikeLink"); for (index = 0; index < like.length; ++index) { like[index].style.display=""; }'
  });

  clicks++;
  if (clicks > 1) {
    clicks = 0;
  }
}

// Make sure this only runs on facebook
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (tab.url.indexOf("facebook.com") > -1) {
      chrome.pageAction.show(tabId);
      if (clicks == 0) {
        like();
      } 
      else {
        dislike();
      }
    }
});

// Called when the user clicks on the page action.
chrome.pageAction.onClicked.addListener(function(tab) {
  if (clicks == 0) {
    like();
  } 
  else {
    dislike();
  }
});

但是该代码根本不起作用(当我点击页面操作图标时,没有任何反应,并且Chrome控制台中没有出现错误消息).

我是JS和Chrome扩展程序的新手.有没有一种简单的方法可以保持我的扩展状态,并且有更好的方法来执行我需要隐藏所有按钮的脚本？

谢谢!

Answer 1

chrome扩展中的状态问题可以有几个答案.选择取决于具体情况.我在你的情况下理解的是你只有两个状态,所以我会给你一些想法.

1.持久的后台脚本

默认情况下,后台脚本在chrome启动时加载,因此它在整个执行chrome期间生效,直到用户明确关闭chrome.结合内容脚本,您可以拥有一个州完整系统.

因此,您可以使用此后台脚本在执行期间保存状态,并通知侦听内容脚本更改:

background.js

var state = 0;

chrome.pageAction.onClicked.addListener(function(tab) {
    if (state = 0) {
        state = 1;
        state0Actions(); //Do what you want
    } 
    else {
        state = 0;
        state1Actions(); //Do what you want
    }

    //Inform content scripts that the state have changed
    chrome.tabs.sendMessage(tab.id, {state : state});
});

//At initialisation, Content scipts will request the current state to background script.
chrome.runtime.onMessage(function(message, sender, callback){
    if(message.getState) callback({state : state});
});

然后,您可以将内容脚本添加到所有Facebook页面,方法是将其添加到您的manifest.json文件中

"content_scripts" :
[
    {
        "matches": ["https://www.facebook.com/*","http://www.facebook.com/*"],
        "all_frames": true,

        "js": ["contentScript.js"]
    }
]

它会自动将contentScipt.js脚本注入到以http(s)://www.facebook.com.开头的所有页面.

contenScript.js //为每个状态函数执行的操作state0Actions(){//为状态0做你想做的事情}

function state1Actions()
{
    //Do what you want for the state 1
}

//Message will be received at each update of state in the background page
chrome.runtime.onMessage.addListner(function(message, sender, callback))
{
    //Check the message is valid
    if(message.state == null)
    {
        console.log("Unreconized message");
        return;
    }

    //Do actions for the right state
    //You also can use if statements here... Switch are more used when there is lots of states
    switch(message.state) {
        case 0 : state0Actions(); break;
        case 1 : state1Actions(); break;
    }
}

//Request the current state to initialise the script
chrome.runtime.sendMessage({getState: true});

这里,onMessage处理程序将在加载时第一次调用,然后每次后台更改状态时调用.

注意在chrome启动时将重置状态.

2. Chrome存储

您可以使用chrome.storage API来管理状态.其重点是状态将被保存,并且不会在chrome启动时重置.

要做到这一点,你有相同的背景代码:

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.storage.local.get("state", function(result)
    {
        //First initialisation of the state in the local storage
        if(result.state == null)
        {
            chrome.storage.local.set({state: 0});
            state0Actions(); //Do what you want
        }
        else if (result.state == 0) {
            result.state = 1;
            state0Actions(); //Do what you want
        } 
        else {
            result.state = 0;
            state1Actions(); //Do what you want
        }

        //Save the new state to the storage
        chrome.storage.set({state: result.state});
    }
});

内容脚本将监听本地存储的更改,而不是从后台页面中获取更新通知:

//the actions to do for each states
function state0Actions()
{
    //Do what you want for the state 0
}

function state1Actions()
{
    //Do what you want for the state 1
}

chrome.storage.local.onChanged.addListener(function(changes, areaName)
{
    if(areaName != "local" || changes.state == null) return;

    switch(changes.state)
    {
        case 0 : state0Actions(); break;
        case 1 : state1Actions(); break;
    }
})

chrome.storage.local.get("state", function(result){
    if(result.state == null) state0Actions(); //Do what you want if the state is not yet initialised
    else if (result.state == 0) state0Actions(); //Do what you want
    else if (result.state == 1) state1Actions(); //Do what you want
})

您还可以使用chrome.storage.sync而不是chrome.storage.local与所有用户的设备共享状态.

这是与国家一起玩的方式.你必须比较你的用例更好.我写的代码没有经过测试,它们只是用来说明我的解释的例子.

不要忘记查看Chrome API文档