获取当前选项卡的URL

时间:2017-03-11 20:13:45

标签: 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仅针对第一个当前选项卡显示,但不针对另一个变为活动的选项卡显示。我尝试将 currentWindow 更改为 lastFocusedWindow windowId 但它没有解决问题。告诉我我做错了什么?

1 个答案:

答案 0 :(得分:1)

请务必阅读extension architecture overview。您不需要背景/事件页面,该页面是扩展内部完全独立的页面,其中有自己的DOM(文档和窗口),无论如何都与网页无关。

您需要一个与网页一起运行的content script,并且可以直接访问其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_idle注入内容脚本,该脚本发生在document_end事件之后。如果您需要在document_end上运行代码,而不是稍后,您可以在manifest.json中明确指定它:

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

P.S。 alert是一种显示信息的反效果方式,因为它会阻止浏览器UI。