Chrome扩展 - 开始点

答

文档：http://code.google.com/chrome/extensions/getstarted.html
样品：http://code.google.com/chrome/extensions/samples.html

这是谷歌Chrome扩展的官方文档和示例代码。在您的manifest中，您希望声明一个页面或浏览器操作的弹出式窗口（以最适合您的扩展名为准）。在你弹出的HTML文件中，你可能想要类似下面的东西;

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function initPopup() { 
       chrome.tabs.getSelected(null, function (tab) { 
        document.body.appendChild(document.createTextNode(tab.url)); 
       }); 
      } 
     </script> 
    </head> 
    <body onload="initPopup();"></body> 
</html>

这非常简单地将选定选项卡的URL附加到弹出框的主体。

您的清单应该如下所示：

{ 
    "name": "My First Extension", 
    "version": "1.0", 
    "description": "The first extension that I made.", 
    "browser_action": { 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 
    "permissions": [ 
     "tabs" 
    ] 
}

这个例子的文件结构是一个包含manifest.json，popup.html和icon.png单个文件夹。

在扩展页面（chrome：// extensions）上，您应该单击加载解压后的扩展...并导航到此文件夹。如果您对清单进行了任何更改，请务必点击重新加载链接来获取这些更改。

我希望这可以帮助，但我强烈建议阅读我上面提到的文档，以更好地了解你在做什么。

编辑：添加缺少代码的null参数，并包含基于从评论中收集的附加信息的示例清单和文件结构。

+0

什么更加明确非常感谢。我得到这个错误：没有找到网页的网址：chrome-extension：//hjmfkfilkpoggknobhhllgidfohljfph/popup.html 错误6（net :: ERR_FILE_NOT_FOUND）：无法找到文件或目录。 – Ron

+0

你能告诉我你的清单的内容并让我知道你的文件结构吗？ – Alasdair

+0

{ “名”： “我的第一个扩展”， “版本”： “1.0”， “说明”： “我所做的第一个分机。” “browser_action”：{ “default_icon”：“图标.png“， ”popup“：”popup.html“ } }文件结构：清单和popup.html位于相同的目录，当然还有icon.png文件。 – Ron

答

尝试在弹出该代码，它为我工作（谷歌的Chrome 14测试版）：

chrome.windows.getCurrent(function(window) { 
    chrome.tabs.getSelected(window.id, function(tab) { 
     console.log(tab); 
     console.log(tab.url); // url of the current tab 
    }); 
});

欲了解更多信息检查：http://code.google.com/chrome/extensions/tabs.html#method-getSelected

+0

你只需要提供'null'作为'chrome.tabs.getSelected'的窗口ID参数，因为它默认为当前窗口（就像你提供的链接中提到的那样）。 – Alasdair

答

它看起来像所有这些答案都已经过时所以这里是一个明显的例子。这个例子你将需要jQuery。我已将所有文件包含在gist中。

的manifest.json

{ 
    "manifest_version": 2, 

    "name": "Hello World", 
    "version": "1.0", 

    "author": "Christian Juth", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "permissions": [ 
    "activeTab" 
    ] 
}

popup.html

<!doctype html> 
<html> 
    <head> 
    <title>Hello World</title> 
    <script src="jquery.js"></script> 
    <script src="popup.js"></script> 
    </head> 
    <body> 

    <span id="address"></span> 

    </body> 
</html>

popup.js

$(document).ready(function(){ 

    //define query 
    var query = { active: true, currentWindow: true }; 

    //query tabs 
    chrome.tabs.query(query, function (tabs) { 
    currentAddress = tabs[0].url; 
    $('#address').text(currentAddress); 
    }); 

});

+0

勇敢的尝试，但downvoting，因为它显示错误的地址（弹出本身的地址，而不是当前标签）。 – Xan

+0

我同意需要''manifest_version“：2'答案。希望你将它编辑成形。 – Xan

+0

对不起，我误解了这个问题。它现在应该工作。 –

Chrome扩展 - 开始点

相关推荐