Chrome擴展麻煩，得到一個文本菜單隻加載特定頁面

Question

我已經開始從谷歌contextMenu例子。它使用適用於所有頁面的背景頁面創建上下文菜單。

我正在尋找一種方式來創建上下文菜單隻有專門爲網頁。我試圖針對的示例頁面是任何Reddit頁面。

我manifest.json：

{ 
    "name": "Context Menus Sample", 
    "description": "Shows some of the features of the Context Menus API", 
    "version": "0.6", 
    "permissions": ["contextMenus"], 

    "manifest_version": 2, 
    "content_scripts": [ 
    { 
     "matches": ["http://www.reddit.com/*"], 
     "js": ["sample.js"] 
    } 
    ] 
} 

sample.js是由谷歌提供的例子同樣一個from the original contextMenu example project。它最初是一個背景頁面腳本，我將它移動到內容腳本部分，以便它只會加載指定的（Reddit）URL。從sample.js

示例代碼：

var checkbox1 = chrome.contextMenus.create(
    {"title": "Checkbox1", "type": "checkbox", "onclick": checkboxOnClick} 
); 

所以我的困惑在於，爲什麼文本菜單顯示不出來，當你在reddit.com。我的印象是，當url匹配時，sample.js會觸發。

Answer 1

你can't use (most) of the chrome.* APIs from a content script。您的sample.js運行，但API調用失敗。

相反，你應該把它搬回到後臺腳本，並在chrome.contextMenus.create()閱讀文檔。

具體來說，您可以通過documentUrlPatterns參數來限制出現在上下文菜單：

var checkbox1 = chrome.contextMenus.create({ 
    "title": "Checkbox1", 
    "type": "checkbox", 
    "onclick": checkboxOnClick, 
    "documentUrlPatterns": ["*://*.reddit.com/*"] 
}); 

Answer 2

更新

我又回到了只含有上下文菜單中的原manifest.json：

{ 
    "name": "Context Menus Sample", 
    "description": "Shows some of the features of the Context Menus API", 
    "version": "0.6", 
    "permissions": ["contextMenus"], 
    "background": { 
    "scripts": ["sample.js"] 
    }, 
    "manifest_version": 2 
} 

我開始改變sample.js行創建第一個菜單項（請注意，這是一個學習的經驗）：

for (var i = 0; i < contexts.length; i++) { 
    var context = contexts[i]; 
    var title = "Test '" + context + "' menu item"; 
    var id = chrome.contextMenus.create({"title": title, "contexts":[context],"onclick": genericOnClick}); 
    console.log("'" + context + "' item:" + id); 
} 

這個（僅僅改變var id部分：

for (var i = 0; i < contexts.length; i++) { 
    var context = contexts[i]; 
    var title = "Test '" + context + "' menu item"; 
    var id = chrome.contextMenus.create({ 
    "title": title, 
    "contexts": [context], 
    "onclick": genericOnClick, 
    "documentUrlPatterns": ["*://*.reddit.com/*"] 
    }); 
    console.log("'" + context + "' item:" + id); 
} 

結論

從

上述更改現在只能在您處於reddit頁面時才能訪問第一個菜單項。因此，從這一點來確定我的擴展的其餘部分並不困難。謝謝你們的幫助。

我道歉，以編輯爲我可怕的格式。我是這個網站的新手，對於擴展是新的，不幸的是，在我平常的睡眠時間之後的幾個小時。我會盡量不要再讓你陷入那種愚蠢的境地。