当用户访问特定站点时，如何在 Google Chrome 扩展程序中自动保存 URL？

Question

I am new to web programming, but not to programming in general.我是 web 编程的新手，但不是一般的编程新手。 I am trying to build a Google Chrome extension that will automatically save the URL whenever a user visits any page on StackOverflow.com.我正在尝试构建一个 Google Chrome 扩展程序，每当用户访问 StackOverflow.com 上的任何页面时，它都会自动保存 URL。 Then I would like to display the list of URLs in in the extension popup.然后我想在扩展弹出窗口中显示 URL 列表。

So far, I have decided that I need a Page Action extension because I only want it to be active on StackOverflow pages.到目前为止，我已经决定我需要一个 Page Action 扩展，因为我只希望它在 StackOverflow 页面上处于活动状态。 I understand the different ways to access tabs and their URLs, but I don't know where to put the code.我了解访问选项卡及其 URL 的不同方式，但我不知道将代码放在哪里。

For example, I'm not sure if I need a content script and/or background script.例如，我不确定是否需要内容脚本和/或背景脚本。 I'm also pretty confused about Listeners and whether I need to be sending messages between the content script and the event page or popup script.我也很困惑 Listeners 以及我是否需要在内容脚本和事件页面或弹出脚本之间发送消息。 This is what I have so far:这是我到目前为止所拥有的：

manifest.json manifest.json

  "manifest_version": 2,
  "name": "Stack Overflow visit history",
  "version": "1.0",
  "description": "This Chrome extension stores your Stack Overflow URL visits.",
  "icons": {
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
  },
  "page_action": {
      "default_icon": "icon16.png",
      "default_popup": "popup.html",
      "default_title": "StackOverflowVisits"
  },
  "background": {
      "scripts": ["eventPage.js"],
      "persistent": false
  },
  "content_scripts": [
      {
          "matches": ["https://stackoverflow.com/*"],
          "js": ["content.js", "jquery-3.5.1.min.js"]
      }
  ],
  "permissions": [
    "webNavigation",
    "tabs",
    "https://stackoverflow.com/*"
  ]
}

popup.html popup.html

<html>
  <head>
      <title>Stack Overflow Visit History</title>
      <style>
        body {min-width: 250px;}
      </style>
      <script src="jquery-3.5.1.min.js"></script>
      <script src="popup.js"></script>
  </head>
  <body>
    <h2>StackOverflowVisits</h2>
    <div id="newUrlList"></div>
  </body>
</html>

popup.js popup.js

  var tabUrl = tabs[0].url;
  chrome.storage.local.get({'urlList':[]}, function(item){
    var newUrlList = item.urlList;
    if (newUrlList.indexOf(tabUrl) === -1) {
      newUrlList.push(tabUrl);
    }
    console.log(newUrlList);
    chrome.storage.local.set({urlList: newUrlList});
  });
});

content.js内容.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
       chrome.extension.getBackgroundPage().console.log(tab.url);
       chrome.storage.sync.set({tabId : tab.url})
});

Answer 1

Content scripts cannot access all extension APIs, they don't have access to chrome.tabs.onUpdated ( more details ).内容脚本无法访问所有扩展 API，它们无权访问chrome.tabs.onUpdated （更多详细信息）。

In this case, you don't need a content script, you can add that listener in the background script, this script is running the entire time the browser is open if it is not set to persistent: false .在这种情况下，您不需要内容脚本，您可以在后台脚本中添加该侦听器，如果未设置为persistent: false ，此脚本将在浏览器打开的整个过程中运行。

About communication between contexts: In this case, if you will only have a background script and a popup, you can access the background script from the popup using chrome.extension.getBackgroundPage() or, you can simply save data in the store in the background script and load it from the store when the popup is opened.关于上下文之间的通信：在这种情况下，如果您只有一个后台脚本和一个弹出窗口，您可以使用chrome.extension.getBackgroundPage()从弹出窗口访问后台脚本，或者您可以简单地将数据保存在存储中的后台脚本并在弹出窗口打开时从商店加载它。 If you're looking for realtime updates, you can use a communication port or a request/response scheme ( more details ).如果您正在寻找实时更新，您可以使用通信端口或请求/响应方案（更多详细信息）。

I don't know if you've already done this because you haven't shared the contents of the background script ( eventPage.js ) but in order to show the page action on specific pages you'll have to register it, you can find out more details about that here我不知道您是否已经这样做了，因为您还没有共享后台脚本 ( eventPage.js ) 的内容，但是为了在特定页面上显示页面操作，您必须注册它，您可以在此处了解更多详细信息

当用户访问特定站点时，如何在 Google Chrome 扩展程序中自动保存 URL？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-17 20:58:44

当用户访问特定站点时，如何在 Google Chrome 扩展程序中自动保存 URL？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-17 20:58:44

解决方案1
0 已采纳 2020-06-17 20:58:44