将当前网址传递给Chrome扩展程序中的开发工具面板

时间:2017-04-11 16:07:49

标签: javascript google-chrome-extension

我试图了解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");
});

panel.html

<html>
<head>
  <script>alert('hello')</script>
</head>
<body>
<h2>DevTools panel</h2> 
<div id="currentUrl">The current url should go here</div>
</body>

0 个答案:

没有答案