基於

Question

我剛開始使用JavaScript和想修改的MDN教程腳本「匹配」 content_scripts運行不同的腳本，Your First WebExtension

我想周圍畫一個紅色或藍色的盒子一個網頁取決於它是http：//還是https：//。但是，只有一個腳本會運行。

的manifest.json的是這樣的：

{ 
 

 
    "manifest_version": 2, 
 
    "name": "HTTPS Detect", 
 
    "version": "1.0", 
 

 
    "description": "Draws a blue border around HTTPS protected websites. Non-HTTPS sites are given a red border, indicating they do not provide encryption.", 
 

 
    "icons": { 
 
    "48": "icons/border-48.png" 
 
    }, 
 

 
    "content_scripts": [ 
 
    { 
 
\t 
 
     "matches": ["https://*/*"], 
 
     "js": ["httpsdetect.js"], 
 
     "matches": ["http://*/*"], 
 
     "js": ["nohttps.js"] 
 
     
 
\t } 
 
\t 
 
\t ] 
 
    
 
}

的httpsdetect.js如下：

document.body.style.border = "5px solid blue";

而且nohttps.js被：

document.body.style.border = "5px solid red";

Answer 1

的content_scripts關鍵是對象的陣列（每片含強制性matches密鑰），而不是僅僅使用相同的按鍵的多個拷貝的單個對象。您擁有它的方式，您在同一個對象中有兩個matches和兩個js鍵。這將在文件的後面解釋爲覆蓋之前的文件中的關鍵字。

對於每個matches它應該是一個不同的對象在數組中。你的manifest.json可能看起來像：

manifest.json的：

{ 

    "manifest_version": 2, 
    "name": "HTTPS Detect", 
    "version": "1.0", 

    "description": "Draws a blue border around HTTPS protected websites. Non-HTTPS sites are given a red border, indicating they do not provide encryption.", 

    "icons": { 
    "48": "icons/border-48.png" 
    }, 

    "content_scripts": [ 
    { 
     "matches": ["https://*/*"], 
     "js": ["httpsdetect.js"] 
    }, 
    { 
     "matches": ["http://*/*"], 
     "js": ["nohttps.js"] 
    } 
    ] 
} 

或者，因爲你加載只有一個文件，你可以加載相同的JavaScript文件到兩個http和https頁面，並根據URL匹配http或https更改您正在執行的操作。如果在兩個腳本之間共享某些代碼的情況下，這樣做可能會更有效（或者，您可以將一個文件中的共享代碼加載到兩個文件中，同時將帶有非共享代碼的單獨文件加載到每個文件中）。在這種情況下，您可以使用與matches陣列中的兩個都匹配的單個match pattern或多個匹配模式。