Javascript 页面操作图标仅在扩展页面中显示_Javascript_Html_Google Chrome_Google Chrome Extension

Javascript 页面操作图标仅在扩展页面中显示

javascript html google-chrome google-chrome-extension

Javascript 页面操作图标仅在扩展页面中显示,javascript,html,google-chrome,google-chrome-extension,Javascript,Html,Google Chrome,Google Chrome Extension,我正在学习创建chrome扩展。我研究了页面操作，它用于在地址栏中创建图标。我的代码如下：在mymanifest.json中： { "manifest_version" :2, "name" : "GTmetrix", "description": "Test google chrome extension", "version" : "1.0", "page_action":{ "default_icon" : "icon.png", "de

我正在学习创建chrome扩展。我研究了页面操作，它用于在地址栏中创建图标。我的代码如下：

在my

manifest.json

中：

{
  "manifest_version" :2,    
  "name" : "GTmetrix",
  "description": "Test google chrome extension",
  "version" : "1.0",
  "page_action":{
     "default_icon"  : "icon.png",
     "default_popup" : "popup.html",
     "default_title" : "Test Google chrome extension"
  },
  "background": { "scripts": ["background.js"] },
  "permissions" : [
     "activeTab"
  ]
}

在my

background.js中
chrome.tabs.getSelected(null, function(tab) {
  chrome.pageAction.show(tab.id);
});

在mypopup.html中

<html>
<head>
        <script src="jquery.min.js"></script>
        <script src="popup.js"></script>
        <!--<script src="background.js"></script>-->
        <style>
             body{ background:pink}
            .block{ width : 100%;}
        </style>
</head>
<body>
        <div class="block">
            <h2>Test extension</h2>
            <button id="checkpage">Check this page now!!</button>
        </div>
</body>
</html>


正文{背景：粉红色}
.block{宽度：100%；}
测试扩展
现在查看此页！！

因此，当我使用上述代码时，它显示如下：

但当我转到其他页面，如谷歌或其他页面时，它不会显示图标：

我的manifest.json
中的background
出了什么问题，有什么用？为什么要使用content\u script
，其确切含义是什么
我已经浏览了background.js中的使用
chrome.tabs.onUpdated.addListener(function(id, info, tab){
    showPageAction(tab);
});

chrome.tabs.onActivated.addListener(function(id, info, tab){
    chrome.tabs.query({ currentWindow: true, active: true },
        function (tabArray) {
            if(tabArray[0]){
                showPageAction(tabArray[0]);
            }
        });
});

function showPageAction(tab){
    chrome.pageAction.show(tab.id)
}

还有其他方法
附言：
在显示之前，您可以检查选项卡URL或其他内容作为标准
如果适用于所有选项卡，则不使用用户页面操作-改用浏览器操作
因此，您开始学习Chrome扩展。。
您查看了Devguide页面
您绝对必须关注的是，尤其是架构部分。它解释了什么
例如，当您需要与打开的选项卡的内容交互时，需要内容脚本
你的分机为什么不工作？
后台脚本在加载扩展时加载。因此，您的代码执行：
// Grab the currently active tab
// (this is deprecated by the way, tabs.query is the modern way)
chrome.tabs.getSelected(null, function(tab) {
  // Show the button on that tab
  chrome.pageAction.show(tab.id);
});

从你的截图上看，它非常完美
然后，你的背景脚本就完成了。没有什么可以做的了，它也不会做任何事情。而且，当页面操作需要显示时，您将再也看不到该图标
那么如何让它工作呢？
嗯，您的背景页面通常是各种事件的中心调度。你需要告诉Chrome你想通过注册来做出反应
Amit G提出了一系列要“挂钩”的事件。就我个人而言，我会涵盖onUpdated
、onCreated
和onReplaced
事件，以捕获所有页面更改
事件处理程序是唯一的方法吗？
在许多情况下，是的，但显示页面操作是幸运的。它是由支持的，它允许您设置它何时出现的规则，并让Chrome处理其余的事情
这些文件有很多很好的例子
显示图标似乎需要做很多工作！
嗯，是的，因为页面操作应该是由某些条件触发的
发件人：
如果希望扩展的图标始终可见，请改用浏览器操作
因此，除非您只需要在某些页面上显示图标，否则请改用。
请不要使用反勾（`）突出显示普通文本。它们是用于内联代码的。这也可能有助于我认为它不是一个坏的代码；至少是最新的。@Xan抱歉……你想说什么？评论你的教程链接太棒了！！它可以工作…但它显示所有页面…如何限制特定页面？例如，我想从google限制此扩展…showPageAction（tab）->tab是的对象。通常tab.url用于将其限制在某些域。您能解释一下这个答案吗：（我在其中提到了~tab.url.indexOf（'.pl'）
？有人能解释一下吗？tab.url->包含url的字符串->indexOf（）字符串函数->查找“p1”的索引在url中。非常感谢！！我会从你的回答中学习，如果我有任何疑问，我会问你…。我已经提到了，~tab.url.indexOf（'.pl'）
？有人能解释一下吗？不在这里。这不是一个论坛，你不应该在回答中问后续问题。我确信它已经回答了，搜索吧。