5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

Chrome擴充套件編寫

一個 Chrome 擴充套件其實就是一個配置檔案 manifest。json 和一系列 html、css、js檔案的集合,只要有一點點前端的基礎,寫一個簡單的 擴充套件還是很簡單的。

這裡就帶你5分鐘寫個簡單的擴充套件,功能就是點選連結在新標籤頁開啟,chrome_extension擴充套件目錄結構如下:

λ treechrome_extension├── icon。jpg├── lib│   └── jquery。min。js├── manifest。json└── url。js

一個icon圖片檔案,lib目錄下一個jQuery檔案(如果不依賴jQuery庫可以不需要),一個配置檔案manifest。json以及一個編寫程式碼的檔案url。js,就這4個檔案行了。

先來看看manifest。json檔案裡的內容,主要在content_scripts載入的js檔案:

{    “name”:“新標籤開啟網頁”,    “version”:“2”,    “icons”:{        “16”:“icon。jpg”,        “32”:“icon。jpg”,        “48”:“icon。jpg”,        “128”:“icon。jpg”    },    “manifest_version”:2,    “description”:“新標籤開啟網頁 by蘇生不惑”,    “content_scripts”:[//執行指令碼        {            “matches”:[                “https://*/*”//判斷URL是否匹配            ],            “js”:[//待執行的指令碼                “lib/jquery。min。js”,                “url。js”            ]        }    ]}

其實要寫的程式碼就是url。js裡的3行:

$(document)。ready(function () { //document。querySelectorAll(“a”)。forEach(function(item,index,arr){item。target=‘_blank’;}); $(‘a’)。each(function(index,item){$(this)。attr(‘target’,‘_blank’);});});

擴充套件程式碼寫好了就可以安裝到谷歌瀏覽器了,具體如何安裝看之前文章上不了谷歌如何安裝 Chrome 擴充套件?,開啟chrome://extensions/,點選載入已解壓的擴充套件程式,就是chrome_extension目錄。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

就這樣安裝好了,測試下沒問題,原來寫擴充套件就是這麼簡單,5分鐘搞定,當然這只是個demo,下面來看看大名鼎鼎的油猴擴充套件怎麼寫的, 谷歌瀏覽器的擴充套件預設安裝目錄為 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions ,xxx為你的Windows使用者名稱 ,先在擴充套件裡找到油猴的id為 dhdgffkkebhmkfjojejmpbldmpobfkfo

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

找到油猴擴充套件的原始碼目錄 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions\dhdgffkkebhmkfjojejmpbldmpobfkfo\4。13_0 ,這個manifest。json檔案寫得就複雜多了。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

順便提下怎麼備份Chrome擴充套件,這樣方便遷移到新電腦使用,這個在之前文章也分享過了那些你可能不知道的谷歌瀏覽器實用技巧。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

匯出生成的crx檔案就可以分享給他人使用了。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

最後如果你想釋出擴充套件到谷歌商店供他人安裝,可以在谷歌管理後臺提交你的擴充套件,不過需要5美元的費用。

油猴指令碼編寫

寫油猴指令碼就更簡單了,先安裝好油猴擴充套件,在公眾號後臺回覆

油猴

手動安裝,然後直接新建指令碼。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

指令碼內容如下:

// ==UserScript==// @name         新標籤開啟網頁// @namespace    http://tampermonkey。net/// @version      0。1// @description  新標籤開啟網頁// @author       蘇生不惑// @match        *://*/*// @grant        none// ==/UserScript==(function() {    ‘use strict’;    document。querySelectorAll(“a”)。forEach(function(item,index,arr){item。target=‘_blank’;});})();

然後匯出你寫的指令碼檔案,這樣方便給其他人安裝使用。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

同樣的也可以在 https://greasyfork。org/zh-CN/script_versions/new 釋出你的指令碼,比如之前分享過的油猴指令碼實用油猴指令碼推薦,讓你的谷歌瀏覽器更強大

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

除了寫Chrome擴充套件和油猴指令碼,讓瀏覽器執行指令碼還有個更簡單的方法就是書籤。

書籤

先新增一個網頁到書籤然後修改,複製這段程式碼到網址裡:

javascript:“use strict”;!(function(){document。querySelectorAll(“a”)。forEach(function(item,index,arr){item。target=‘_blank’;});})();

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

使用的時候點選網頁上方的

新標籤開啟網頁

就行了,比Chrome擴充套件和油猴麻煩點。

5 分鐘帶你寫個自己的 Chrome 擴充套件和油猴指令碼

順便分享2個書籤程式碼,第一個是顯示密碼,預設輸入密碼的地方是星號*

javascript:“use strict”;!function(){for(var tag=document。getElementsByTagName(“input”),i=0;i

第二個是自由編輯網頁

javascript:“use strict”;!function(){“true”===document。body。getAttribute(“contenteditable”)?(document。body。setAttribute(“contenteditable”,false),alert(“關閉自由編輯網頁了!”)):(document。body。setAttribute(“contenteditable”,true),alert(“可以自由編輯網頁了!”))}();