Javascript DOM Chrome擴展簡單腳本

Question

我爲Firefox做了一個擴展，它隨機檢查網站上的所有單選按鈕&複選框。現在我將用於Chrome。

JS（inject.js）：

function randomFromTo(from, to){ 
     return Math.floor(Math.random() * (to - from + 1) + from); 
} 

function autoFill() { 
    for (i = 0; i < document.forms.length ;i++) { 
     for (j = 0; j < document.forms[i].length ;j++) { 
      if (document.forms[i].elements[j].type == "radio") { 
       start = j; 
       lastName = document.forms[i].elements[j].name; 

       while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) { 
        j++; 
       } 
       rand = randomFromTo(start, j); 
       document.forms[i].elements[rand].checked = true; 
      } 
      if (document.forms[i].elements[j].type == "checkbox") { 
       start = j; 
       lastName = document.forms[i].elements[j].name; 

       while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) { 
        j++; 
       } 
       rand = randomFromTo(start, j); 
       document.forms[i].elements[rand].checked = true; 
      } 
     } 
    } 
} 

autoFill(); 

所以，我讀了很多關於inject.js和內容腳本，所以我都嘗試。並做到這一點。

{ 
    "name": "Auto Check Radio \u0026 Checkbox", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "", 
    "homepage_url": "", 
    "icons": { 
    "16": "icons/icon16.png", 
    "48": "icons/icon48.png", 
    "128": "icons/icon128.png" 
    }, 
    "default_locale": "en", 
    "background": { 
    "page": "src/bg/background.html", 
    "persistent": true 
    }, 
    "browser_action": { 
    "default_icon": "icons/icon16.png", 
    "default_title": "Autocheck", 
    "default_popup": "src/browser_action/browser_action.html" 
    }, 
    "permissions": [ 
    "tabs", 
    "notifications", 
    "http://*/", 
    "http://*/*", 
    "https://*/*" 
    ], 

    "content_scripts": [{ 
    "matches": ["https://*/*", "http://*/*"], 
    "js": ["src/inject/inject.js"], 
    "run_at": "document_end" 
    }], 
    "web_accessible_resources": ["src/inject/inject.js"], 
     "js": ["src/inject/inject.js"] 
    } 
    ] 
} 

但我不知道如何運行代碼。在Firefox上它更容易。
我不需要任何background.html或browser_action.html

我只是想運行的腳本 - 通過點擊圖標 - 在當前標籤。

難道有人給我一個提示，我把我的腳本？

Answer 1

請首先閱讀Overview文件。尤其是Architecture部分。

---

任何與頁面DOM交互的代碼都必須在Content Script中。您已將代碼放入src/inject.js。

1. 現在，你不需要任何的用戶界面，彈出當你點擊該按鈕，這樣下降從清單和HTML的"default_popup"項目。

2. 您也不希望代碼在加載標籤時隨機執行。這就是清單中的"content_scripts"部分所講述的內容，因此只需將刪除即可。

3. 最後，您不需要背景HTML文件。它們已被自動生成的頁面替換，這些頁面是從腳本列表構建的。所以：現在

   "background": { 
       "scripts": ["src/bg/background.js"] 
       }, 
       "browser_action": { 
       "default_icon": "icons/icon16.png", 
       "default_title": "Autocheck" 
       }, 
   

4. ，後臺腳本的唯一工作就是註冊按鈕單擊處理程序。這是通過browserAction API完成：

   // src/bg/background.js 
   chrome.browserAction.onClicked.addListener(function(tab) { 
       chrome.tabs.executeScript(tab.id, {file: "src/inject/inject.js"}); 
   }); 
   

就是這樣，在這一點上它應該工作。

---

現在，以減少脂肪。

1. 你並不需要一個持久的後臺頁面，因爲它是所有保持簡單的事件偵聽器不保存任何類型的狀態信息。您可以安全地將"persistent": false添加到清單。

2. 您的權限是一個巨大的矯枉過正。有一個方便的activeTab permission，如果您的代碼被瀏覽器操作按鈕按下來調用，您可以訪問當前頁面。

   其實這就是你的代碼需要的只有權限。它會照顧executeScript電話。

   "permissions" : ["activeTab"],