Question

我正在创建一个小扩展，只是为了向当前标签添加简单样式

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    code: "var flag; console.log(flag); if(flag !== 1){window.document.styleSheets[0].insertRule('html{font-size: 10px;}'); flag = 1} else{window.document.styleSheets[0].removeRule('html{font-size: 16px;}'); flag = 0;}"
  });
});

工作正常，并创建切换我写了这个逻辑：

var flag;
console.log(flag);
if (flag !== 1) {
  window.document.styleSheets[0].insertRule('html{font-size: 10px;}');
  flag = 1
} else {
  window.document.styleSheets[0].removeRule('html{font-size: 16px;}');
  flag = 0;
}

第一次单击按钮时，标记值未定义。

我的问题：有没有更好的方法来编写此切换？

Answer 1

executeScript具有误导性 - 它将脚本插入页面并运行它，它不仅仅在页面上执行该代码。所以你将插入脚本的多个副本。很难说这个页面会对你脚本的多个副本做什么，至少应该抱怨已经定义了标志。

但是，如果您接受多个副本可能会被插入但不会特别重要，那么您应该这样做，以便标志状态是可预测的：

window.flag = window.flag || false;
flag = !flag; // toggle - note window scope is implicit
if (flag) {
    // do flag == true stuff
} else {
    // do flag == false stuff
}

通过显式引用窗口对象，您可以添加属性而无需声明它，它将默认为false。这条线的执行次数也无关紧要。

将一个以上的变量添加到窗口对象通常被认为是不好的做法，你应该将它命名为永远不会与任何其他变量冲突的东西 - 即不是标志！话虽如此，通常的做法是创建一个唯一的变量来充当命名空间，例如

window.bhansa = window.bhansa || {myFlag: false, myOtherVariable: 12345};

然后bhansa将被创建，如果它不存在，你可以安全地定义函数并添加变量作为该对象的属性而不用担心冲突：

bhansa.myFunction = function() {
}
bhansa.myFilename = "xxx"

Answer 2

我认为实现您尝试做的最佳方式可以使用Chrome Tabs API和Storage API

来完成

_onPanResponderRelease = (evt, gestureState) => {
    let {toggleable} = this.state;
    let {disabled, onValueChange} = this.props;

    if (toggleable && !disabled) {
      if (onValueChange) { // calls onValueChange and..?
        this.toggleSwitch(onValueChange) // call toggle switch
      }
    }
  };

toggleSwitch = (result, callback = () => null) => {
    let {value, switchAnimation} = this.state;
    let toValue = !value;

    this.animateHandler(this.handlerSize);

    this.animateSwitch(toValue, () => {
      callback(toValue);
      this.setState({
        value: toValue,
        left: toValue ? onLeftValue : offLeftValue
      });
     switchAnimation.setValue(toValue ? -1 : 1)
    })

希望这能解决你的问题。

javascript在Chrome扩展程序中切换

2 个答案: