为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只斗牛犬 2022-10-08 17:29:56
我是网络编程的新手,但不是一般的编程。我正在尝试构建一个 Google Chrome 扩展程序,每当用户访问 StackOverflow.com 上的任何页面时,它都会自动保存 URL。然后我想在扩展弹出窗口中显示 URL 列表。到目前为止,我已经决定我需要一个 Page Action 扩展,因为我只希望它在 StackOverflow 页面上处于活动状态。我了解访问选项卡及其 URL 的不同方式,但我不知道将代码放在哪里。例如,我不确定是否需要内容脚本和/或背景脚本。我也很困惑 Listeners 以及我是否需要在内容脚本和事件页面或弹出脚本之间发送消息。这是我到目前为止所拥有的:清单.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<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  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});  });});内容.jschrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {       chrome.extension.getBackgroundPage().console.log(tab.url);       chrome.storage.sync.set({tabId : tab.url})});
查看完整描述

1 回答

?
繁花不似锦

TA贡献1851条经验 获得超4个赞

内容脚本无法访问所有扩展 API,它们无权访问chrome.tabs.onUpdated更多详细信息)。

在这种情况下,您不需要内容脚本,您可以在后台脚本中添加该侦听器,如果未设置为,该脚本将在浏览器打开的整个过程中运行persistent: false

关于上下文之间的通信:在这种情况下,如果您只有一个后台脚本和一个弹出窗口,您可以使用chrome.extension.getBackgroundPage()或从弹出窗口访问后台脚本,您可以简单地将数据保存在后台脚本中的存储中并从弹出窗口打开时存储。如果您正在寻找实时更新,您可以使用通信端口或请求/响应方案(更多详细信息)。

我不知道您是否已经这样做了,因为您还没有共享后台脚本 ( eventPage.js) 的内容,但是为了在特定页面上显示页面操作,您必须注册它,您可以了解更多信息关于这里的详细信息


查看完整回答
反对 回复 2022-10-08
  • 1 回答
  • 0 关注
  • 111 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号