Question

我是一名HTML / Javascript新手试图创建一个简单的浏览器操作＆＃34;镀铬扩展。我花了几个小时试图让它的一部分工作。当弹出窗口打开时，会出现一个名为＆＃34; myBtn＆＃34;的按钮，当点击ID为＆＃34; Demo＆＃34;应该从文本更改为innerHTML，即当前标签页Url。我已经设法达到一个点，在点击按钮时，默认文本被替换为＆＃34; undefined＆＃34;。我为解决这个问题所做的每一项改变似乎都让我失望。我在这个网站和其他网站上看过很多帖子，但无法解决。有人在我的代码中看到错误，导致Url无法进行diplaying吗？

我有＆＃34;标签＆＃34;和＆＃34; activeTab＆＃34;清单中的权限。相关代码是：

"manifest_version": 2,
"name": "Sample",
"description": "This extension launches Form on current page",
"version": "1.0",

"icons": { "128": "ITVCicon128x128.png" },

"browser_action": {
"default_icon": "ITVCicon.png",
"default_popup": "popup.html"
 },
"permissions": [
      "tabs",
  "activeTab",
      "https://ajax.googleapis.com/"

Popup.html是：

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p> click the button to get the current tab URL for cut/paste  <button
id="myBtn"> Try it</button> </p>
<p id="demo">Url displays Here</p>
<script src="popup.js"></script>
</body>
</html>

包含这些功能的popup.js是：

function geturl() {
document.getElementById("demo") .innerHTML = 
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var tabURL = tabs[0].url;
    console.log(tabURL);
});
}

document.getElementById("myBtn").addEventListener("click", geturl);

Answer 1

我修改了您的popup.js并使用了DOMContentLoaded，因为Chrome扩展程序建议如下：

<强> popup.js ：

function geturl() {
  chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
  var tabURL = tabs[0].url;
     document.getElementById("demo").innerHTML = tabURL; //The line I changed to pass the URL to html.
   });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("myBtn").addEventListener("click", geturl);
});

因此，您不必将popup.js放在popup.html的身体末端。我换成了：

<强> popup.html ：

<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<p> click the button to get the current tab URL for cut/paste  
<button id="myBtn"> Try it</button> </p>
<p id="demo">Url displays Here</p>
</body>
</html>

最后，我测试了它适用于我。

Chrome扩展程序，chrome.tabs.query的结果未定义

1 个答案: