我正在尝试了解 Chrome 开发者扩展的工作原理。我想在开发工具面板窗口中显示当前活动选项卡的 URL。
我见过这样做的例子：
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
});
不幸的是，我不知道把它放在哪里，以及如何将结果输入面板。我从未看到 chrome.devtools.panels.create 回调的 console.log 输出。
以下是我迄今为止创建的文件。
manifest.html
{
"name": "DevTools panel",
"version": "0.0.1",
"manifest_version": 2,
"description": "Dev tools test.",
"devtools_page": "devtools.html",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
devtools.js
chrome.devtools.panels.create("DevTools panel","chrome.png", "panel.html", function(panel) {
console.log("After panel create");
});
面板.html
<html>
<head>
<script>alert('hello')</script>
</head>
<body>
<h2>DevTools panel</h2>
<div id="currentUrl">The current url should go here</div>
</body>
chrome.tabsdevtoolsdevtools_page在 Firefox 中或使用 webextension-polyfill:
const [response, error] = await browser.devtools.inspectedWindow.eval(
"location.href"
);
// Your URL is in `response`
在 Chrome 中：
chrome.devtools.inspectedWindow.eval("location.href", (response, error) => {
// Your URL is in `response`
});