page_action 在开发者模式下不起作用答案

【问题标题】：page_action doesn't work in developer modepage_action 在开发者模式下不起作用
【发布时间】：2012-12-07 06:31:17
【问题描述】：

问题很简单：如果为chrome制作扩展名并使用

chrome.pageAction

要将图标放在地址栏中，此扩展程序在开发模式下不起作用。为什么不呢？

背景.html

<script language="javascript">

chrome.pageAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(tab.id, {
        file: "jquery.js"
    }, function () {
        chrome.tabs.executeScript(tab.id, {
            code: '$[CODE JQUERY];'
        });
    });
});

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if(tab.url.indexOf("facebook.com") != -1) {
        chrome.pageAction.show(tabId);
    }
});

</script>

【问题讨论】：

你在哪里调用这个 API？请注意，您不能在内容脚本中使用它。
我在 background.html 中使用了这个
你需要显示你的后台脚本的代码。另外请调试后台页面并检查错误。
您不能在 HTML 中使用内联代码。您需要将其移动到某个外部文件（如 background.js）并使用 <script src='background.js'></script> 将其包含在页面中。
好的，现在可以了！之前它只有在发布时才有效。你是我的参考点。谢谢@KonradDzwinel

标签： javascript html google-chrome-extension manifest google-chrome-devtools

【解决方案1】：

贡献给 Konrad Dzwinel 评论，您不能在 HTML 中使用内联代码。将其移至外部 javascript，然后重试。

顺便说一下，Page Actions 确实在开发模式下工作，我一直都在使用它们！这是我的 Background.js 中的一个示例，它检查更新的选项卡上的页面 URL；如果 URL 是我要查找的内容，我会显示页面操作。

/**
* Listener for Displaying the Extension Page Action when the Tab is updated.
* @private
* @event displayPageAction
* @param {Number} tabId The tabId given by the tabs listener to know which tab was updated.
* @param {Object} changeInfo The current status of the tab.
* @param {Object} tab The metadata of the tab.
**/
var displayPageAction = function (tabId, changeInfo, tab) {
var regexAIESEC = new RegExp(/http:\/\/www.myaiesec.net\//); // My page URL
var match = regexAIESEC.exec(tab.url); 
// We only display the Page Action if we are inside a MyAIESEC Page AND it finished loading.
if(match && changeInfo.status == 'complete') {
   chrome.pageAction.show(tab.id);     
}
};

您通过选项卡 onUpdated 偶数处理程序回调此代码。

chrome.tabs.onUpdated.addListener(displayPageAction);

【讨论】：