Question

我正在学习如何创建Chrome扩展程序。我研究过页面操作，用于在地址栏中创建一个图标。我的代码如下：

在我的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"
  ]
}

在我的background.js

中

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

在我的popup.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>

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

但是当我去google或其他网页时，它不会显示图标：

enter image description here

我的background出现了什么问题以及manifest.json的使用情况以及我们使用content_script的原因是什么？具体含义是什么？

我查看了the devguide

Answer 1

因此，您开始学习Chrome扩展程序..

您查看了Devguide页面。

你绝对必须看到的是Overview page，尤其是架构部分。它解释了different scripts (background, content, popup) do and how they interact。

例如，当您需要与打开的标签页的内容进行交互时，需要内容脚本。

为什么您的分机无法正常工作？

加载扩展程序时加载后台脚本。所以，你的代码执行：

// 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);
});

从截图中可以非常完美地使用它。

之后，您的后台脚本已完成。没有什么可以做的，它什么都不做。并且，由于需要告知要显示的页面操作，您再也不会看到该图标了。

那么如何使其发挥作用？

嗯，您的背景页通常是各种活动的中心调度。您需要通过注册an event handler告诉Chrome您想对某些事情作出反应。

Amit G in his answer向＆＃34; hook＆＃34;提出了一系列chrome.tabs API个事件。成。就个人而言，我会覆盖onUpdated，onCreated和onReplaced个事件来捕捉所有页面更改。

事件处理程序是唯一的方法吗？

在许多情况下，是的，但显示页面操作很幸运。它由declarativeContent API支持，允许您设置应该显示的时间规则，让Chrome负责其余部分。

文档有很多很好的例子。

显示图标似乎很多工作！

嗯，是的，因为Page Actions应该是由某些条件触发的。

来自the documentation：

如果您希望扩展程序的图标始终可见，请改用浏览器操作。

因此，除非您只需要在部分页面上显示图标，否则请改用Browser Action。

Answer 2

在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)
}

还有其他方法。 Chrome Extension samples

PS：

在显示之前，您可以检查标签网址或其他内容作为标准。
如果适用于所有标签，请不要执行用户页面操作 - 请改用浏览器操作。

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

2 个答案:

因此，您开始学习Chrome扩展程序..

为什么您的分机无法正常工作？

那么如何使其发挥作用？

事件处理程序是唯一的方法吗？

显示图标似乎很多工作！