# 編寫第一個Chrome Extension

joyqi 發(fā)布于2019-08-23 13:50 / 2963人閱讀

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

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

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

最少結構

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

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

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

元文件manifect.json

元文件用于描述一個Chrome Extension的信息，是創(chuàng)建一個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新建頁面的內(nèi)容，因此需要使用permissions字段，指明需要控制activeTab權限

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

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

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

新頁面文件和圖標

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

Image PlaceHolder!

    640X400

    640X640
    
    32X32

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

120.png

文件內(nèi)。

現(xiàn)在文件準備完畢，可以去看效果了。

測試效果

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

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

正式發(fā)布

可以在Chrome Dashboard內(nèi)發(fā)布擴展，只要點擊進入后，按照操作指示即可。

進一步

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

permissions

chrome_url_overrides

browser_action

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

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

credits

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99655.html

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

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

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

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

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

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

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

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

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

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

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