Question

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

2015-04-07

3197

javascript html google-chrome google-chrome-extension

我是一名 HTML/Javascript 新手，正在尝试创建一个简单的“浏览器操作”chrome 扩展。我花了几个小时尝试让它的一部分工作。弹出窗口打开时，存在一个名为“myBtn”的按钮，单击时，ID 为“Demo”的元素应该从文本更改为 innerHTML，即当前选项卡的 Url。我设法做到了单击按钮时默认文本被替换为“未定义”的地步。我为修复此问题所做的每一项更改似乎都让我退步了。我已阅读了此网站和其他网站上的许多帖子，但无法解决。有人看到我的代码中阻止 Url 显示的错误吗？

我在清单中拥有“tabs”和“activeTab”权限。相关代码是：

"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>

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