Chrome擴展 - 開始點

1

文檔：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參數，幷包含基於從評論中收集的附加信息的示例清單和文件結構。

來源

2011-08-31 07:18:32 Alasdair

+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

1

嘗試在彈出該代碼，它爲我工作（谷歌的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

來源

2011-08-31 12:11:23 martin

+0

你只需要提供'null'作爲'chrome.tabs.getSelected'的窗口ID參數，因爲它默認爲當前窗口（就像你提供的鏈接中提到的那樣）。 – Alasdair

0

它看起來像所有這些答案都已經過時所以這裏是一個明顯的例子。這個例子你將需要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); 
    }); 

});

來源

2015-03-31 20:25:08

+0

勇敢的嘗試，但downvoting，因爲它顯示錯誤的地址（彈出本身的地址，而不是當前標籤）。 – Xan

+0

我同意需要''manifest_version「：2'答案。希望你將它編輯成形。 – Xan

+0

對不起，我誤解了這個問題。它現在應該工作。 –

Chrome擴展 - 開始點

回答

相關問題