很簡單的Chrome擴展顯示警報

Question

我想創建一個快速的Chrome擴展程序（初學者），只是想顯示只要單擊該圖標警報，所以我嘗試了以下內容：

的manifest.json

{ 
    "name": "Something", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Woohoo", 
    "browser_action": { 
     "default_icon": "icon.png" 
    }, 
    "content_scripts" : [{ 
     "matches": ["<all_urls>"], 
     "js" : ["bgscript.js"] 
    }] 

} 

bgscript.js

chrome.browserAction.onClicked.addListener(function(tab) { 
    alert('icon clicked') 
}); 

然而，當我點擊在我的圖標上，沒有任何反應！看着上述 - 任何人都可以發現爲什麼這不起作用？

Answer 1

爲了給瀏覽器的行動的onClicked事件通知，你需要一個background-page（或更好，但event-page），而不是一個content-script。
更改您的清單如下：

// Replace that: 
"content_scripts" : [{...}] 

// with this: 
"background": { 
    "persistent": false, 
    "scripts": ["bgscript.js"] 
} 

---

如果你想在瀏覽器的行動來調用內容腳本的東西，你需要throught使用背景網頁通信Message Passing（例如Simple one-time requests）。
例如： -

manifest.json的

{ 
    "name": "Something", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Woohoo", 
    "browser_action": { 
     "default_icon": "icon.png" 
    }, 
    "background": { 
     "persistent": false, 
     "scripts": ["background.js"] 
    }, 
    "content_scripts" : [{ 
     "matches": ["<all_urls>"], 
     "js" : ["content.js"] 
    }] 
} 

background.js

chrome.browserAction.onClicked.addListener(function (tab) { 
    /* Send a message to the active tab's content script */ 
    chrome.tabs.sendMessage(tab.id, { action: 'saySomething' }); 
}); 

content.js

chrome.runtime.onMessage.addListener(function (msg) { 
    /* We received a message, let's do as instructed */ 
    if (msg.action === 'saySomething') { 
     alert('something'); 
    } 
});