开发者问题收集

获取当前选项卡的 URL

2017-03-11
2280
javascript google-chrome google-chrome-extension

对于测试用例，我想尝试输出当前选项卡的 URL。 我的 manifest.json 

{
"manifest_version": 2,
"name": "Chrome Extension",
"description": "MyExtension",
"icons": {
    "16": "img/favicon.png",
    "48": "img/48.png"
},
"version": "0.1",
"background": {
    "scripts": ["js/content.js"],
    "persistent": false
},
"permissions": [
    "tabs", "https://*/*", "http://*/*"
],
"browser_action": {
    "default_icon": "img/default_icon.png",
    "default_title": "Get URL"
},
"content_scripts": [{
    "matches": ["<all_urls>"],
    "all_frames": true,
    "css": ["css/style.css"]
}],
    "short_name": "GetURL"
}

以及我的 content.js 

document.addEventListener('DOMContentLoaded', () => { 
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    alert(tabs[0].url)
  });
});

问题是，仅显示第一个当前选项卡的 URL，而不显示另一个变为活动状态的选项卡的 URL。我尝试将 currentWindow 更改为 lastFocusedWindow 并更改为 windowId ，但这并没有解决问题。告诉我我做错了什么？

1个回答

请务必阅读 扩展架构概述 。您不需要背景/事件页面，它是扩展程序内部完全独立的页面，具有自己的 DOM（文档和窗口），与网页没有任何关联。

您需要一个 内容脚本 ，它与网页一起运行，可以直接访问其 DOM。

manifest.json： 

"content_scripts": [{
    "matches": ["<all_urls>"],
    "all_frames": true,
    "js": ["js/content.js"],
    "css": ["css/style.css"]
}],

content.js： 

console.log(location.href);

在这里您可以编写普通的 JavaScript DOM 代码并访问网页。

无需 DOMContentLoaded 包装器，因为内容脚本默认在 document_end 事件之后发生的 document_idle 处注入。如果您需要在 document_end 处准确运行代码，而不是稍后运行，您可以在 manifest.json 中明确指定它： 

"content_scripts": [{
    "matches": ["<all_urls>"],
    "all_frames": true,
    "run_at": "document_end",
    "js": ["js/content.js"],
    "css": ["css/style.css"]
}],

附注： alert 是一种适得其反的信息显示方式，因为它会阻止浏览器 UI。

woxxom
2017-03-11