# 編寫第一個Chrome Extension

joyqi 發布于2019-08-23 13:50 / 2914人閱讀

摘要：可以加載到內，通過操縱瀏覽器，從而完成一些定制的工作。一個最低需求的文件是必要的可選的圖標等。如果這樣驗證都是如期望的話，就表明你的第一個擴展已經開發成功。正式發布可以在內發布擴展，只要點擊進入后，按照操作指示即可。

Chrome Extension可以加載到Chrome內，通過操縱Chrome瀏覽器，從而完成一些定制的工作。

假設你想要一個功能，它可以在你點擊上下文菜單項目時剪貼當前標簽的URL和標題的話，這個功能在Chrome本身并不支持，那么就可以通過一個Chrome Extension來完成此項特性。

最少結構

在編碼過程中，我常常需要創建一些占位圖片，以便驗證UI布局和效果。因此我想要創建一個Chrome Extension，當用戶打開新的頁面時，使用一個生成PlaceHolder的鏈接群替代默認的新頁面。

一個Chrome Extension最低需求的文件是manifest.json、必要的html
可選的圖標、CSS、JS等。這里的文件清單如下：

manifect.json 元文件
newtab.html   HTML文件
120.png       圖標文件

元文件manifect.json

元文件用于描述一個Chrome Extension的信息，是創建一個Chrome Extension所必須的。

此文件是一個Json文件，在我們這次需求中文件如下：

{
"manifest_version": 2,
"name": "PlaceHolderImage",
"description": "Make PlaceHolder Image",
"version": "1",
"author": "Reco",
"browser_action": {
   "default_icon": "120.png",
   "default_title": "PlaceHolder Factory"
 },
"chrome_url_overrides" : {
  "newtab": "newtab.html"
},
"permissions": ["activeTab"]
}

接下來就非常關鍵的幾個字段做出說明：

permissions字段指明應用需要的權限。因為我們需要覆蓋默認的Chrome新建頁面的內容，因此需要使用permissions字段，指明需要控制activeTab權限

chrome_url_overrides字段，指明覆蓋Chrome新建頁面的頁面，這里是newtab.html文件。此文件就是一個我們熟悉的任何的HTML文件，其中可以使用任何合法的HTML標簽，以及包含和引入CSS、JS文件

browser_action字段也是非常關鍵的，用來指明Chrome Extension在Chrome工具條的圖標和抬頭。加載任何一個擴展后，會在Chrome瀏覽器工具條上顯示此指定的圖標，當鼠標移動到此圖標時會顯示此指定抬頭

其他字段，這樣用于顯示和備注目的，比如作者author，擴展名字name等。它們不是關鍵字段，但是也需要學習了解

新頁面文件和圖標

在manifest文件內指定了newtab.html，會在用戶創建新頁面的時候顯示，因此是一個關鍵的文件。我們需要再次列出常見的需要生成PlaceHolder圖片的鏈接，內容如下：

Image PlaceHolder!

    640X400

    640X640
    
    32X32

因為只是測試，可以生成一個占位圖來做圖標，我們通過鏈接https://via.placeholder.com/120創建一個突破，并保存到

120.png

文件內。

現在文件準備完畢，可以去看效果了。

測試效果

打開擴展加載鏈接，進入Chrome擴展管理頁面，并打開開發者模式,點擊"加載已解壓的擴展程序"按鈕，在對話框內選擇你的開發目錄，即可加載擴展，你可以看到在Chrome工具欄內的此擴展的圖標，可以把鼠標移動到該圖標上查看擴展的標題，點擊“新標簽頁“菜單，可以看到你的newtab.html被顯示出來。

如果這樣驗證都是如期望的話，就表明你的第一個擴展已經開發成功。

正式發布

可以在Chrome Dashboard內發布擴展，只要點擊進入后，按照操作指示即可。

進一步

在此擴展的開發過程中，我們了解到了類似

permissions

chrome_url_overrides

browser_action

等特定于Chrome Extension的特定開發技術概念，可以在Chrome開發者指導內找到更多API信息。

我個人想要做一個按鍵后拷貝當前頁面的Title和URL的擴展，可以從此擴展Copy URL + Title內學習到更多的開發知識。

credits

本文概略翻譯于此文。
How to Create and Publish a Chrome Extension in 20 minutes
感謝作者的奉獻。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99655.html

# 編寫第二個Chrome Extension+Copy URL+Title

摘要：添加鍵盤快捷鍵的方法提供了，可以通過它來添加觸發中操作的快捷鍵。可以在內聲明如下這意味著在用戶按下指定按鈕，會觸發一個叫做的操作。在后臺頁面中，您可以通過將處理程序綁定到清單中定義的命令。我們在上網時，常常需要把剛興趣的文章記錄下來，方便以后繼續細看。如果記錄為Markdown格式的話，還可以方便的把文章鏈接加入到自己創作的文章內。今天編寫的小工具，就是一個Chrome Exten...

rollback 2019-08-23 13:52 評論0 收藏0
Chrome 擴展開發——編寫一個自己的瀏覽器插件

摘要：配置文件每一個擴展都有一個格式的文件，叫。此消息發送后會觸發擴展內每個頁面的事件。和持續長時間的保持會話需要在和擴展建立一個長時間存在的通道。內容腳本發送消息到擴展程序建立通道，并給通道命名利用通道發送一條消息。這次的練習是做一個Chrome的擴展，分享一下入門開發過程。因為在消息傳遞那塊糾結了特別久，所以我會重點總結消息傳遞那塊。這次做這個插件的功能很簡單，就是點擊按鈕后可以對當...

SunZhaopeng 2019-08-20 11:09 評論0 收藏0
FE.BASE-vscode使用、原理、插件開發筆記

摘要：插件提供內容，負責渲染。增量更新，盡可能地減少重新渲染長時間運行的任務應該支持，并可以取消插件能夠正確地處理對象的生命周期。使用了模式，運行可以將這個對象銷毀。使用命令行使用幫助：code --help 使用已經打開的窗口來打開文件：code -r 打開文件并滾動到特定行：code -r -g package.json:128 比較兩個文件：code -r -d a.tx...

MingjunYang 2019-08-26 13:46 評論0 收藏0
【Chrome擴展開發】定制HTTP請求響應頭域

摘要：關于我的博客掘金專欄路易斯專欄原文鏈接擴展開發定制請求響應頭域本文共字，閱讀需分鐘。那么，我會放棄嗎反向代理顯然不會，既然問題出在上，我去掉就行了。然而無論多少次的學習和模仿，最終的目的還是為了使用，故開發一款定制請求的勢在必行。本文首發于《程序員》雜志2017年第9、10、11期，下面的版本又經過進一步的修訂。關于 Github：IHeader 我的博客：louis blog ...

MadPecker 2019-08-21 17:38 評論0 收藏0
實現一個簡單的chrome插件

摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網...

rubyshen 2019-08-23 13:58 評論0 收藏0