chrome擴展中的javascript切換

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
}

通過顯式引用window對象，可以添加屬性而無需聲明它，並且該屬性默認為false。 該行執行多少次也無關緊要。

向窗口對象添加多個變量通常被認為是不好的做法，您應為其命名，使其永遠不會與任何其他變量發生沖突-即，不要標記！ 話雖如此，創建一個唯一變量作為名稱空間是一種常見的做法，例如

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

然后，如果不存在bhansa，它將被創建，您可以安全地定義函數並將變量添加為該對象的屬性，而不必擔心沖突：

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

Answer 2

我認為，使用Chrome的Tabs API和Storage API可以實現實現您要完成的任務的最佳方法

chrome.tabs.onCreated.addListener(function(tab) {        
    chrome.storage.get({"bhansa": "NOT_FOUND"}, function(store){
       var bhansa = false;
       if (store["bhansa"] || store["bhansa"] == "NOT_FOUND") {
           bhansa = true;
           chrome.storage.set({"bhansa": !bhansa});
       }
       if (bhansa) {
          chrome.tabs.insertCss(tab.id , {code : "html.... " } ,
              function() {
                  console.log("Done adding styles."); 
              }
          );
       }
    }            
});

希望這能解決您的問題。