gpt4 book ai didi

javascript - 将当前 url 传递到 chrome 扩展中的开发工具面板

转载 作者:行者123 更新时间:2023-12-05 06:40:06 25 4
gpt4 key购买 nike

我正在努力了解 Chrome 开发人员扩展程序的工作原理。我想在开发工具面板窗口中显示当前事件选项卡的 URL。

我见过这样做的例子:

chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
});

不幸的是,我不知道把它放在哪里,以及如何将结果放入面板中。我从未看到 chrome.devtools.panels.create 回调的 console.log 输出。

以下是我到目前为止创建的文件。

list .html

{
"name": "DevTools panel",
"version": "0.0.1",
"manifest_version": 2,
"description": "Dev tools test.",
"devtools_page": "devtools.html",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}

开发工具.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.tabs 在开发工具中不可用。如果您正在使用 devtools_page,则可以使用 devtools API:

在 Firefox 中或使用 webextension-polyfill :

const [response, error] = await browser.devtools.inspectedWindow.eval(
"location.href"
);

// Your URL is in `response`

在 Chrome 中:

browser.devtools.inspectedWindow.eval("location.href", (response, error) => {
// Your URL is in `response`
});

关于javascript - 将当前 url 传递到 chrome 扩展中的开发工具面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43351103/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com