蘇生不惑第258 篇原創文章，將本公眾號設為星標，第一時間看最新文章。
前幾天分享過文章實用油猴腳本推薦，讓你的谷歌瀏覽器更強大（二），有人問如何自己寫個油猴腳本，今天就來分享如何寫個自己的Chrome擴展和油猴腳本。
Chrome擴展編寫一個 Chrome 擴展其實就是一個配置文件 manifest.json 和一系列 html、css、js文件的集合，只要有一點點前端的基礎，寫一個簡單的 擴展還是很簡單的。
這裡就帶你5分鐘寫個簡單的擴展，功能就是點擊連結在新標籤頁打開，chrome_extension擴展目錄結構如下：
λ tree
chrome_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分鐘搞定，當然這只是個demo，下面來看看大名鼎鼎的油猴擴展怎麼寫的， 谷歌瀏覽器的擴展默認安裝目錄為 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions ，xxx為你的Windows用戶名 ，先在擴展裡找到油猴的id為 dhdgffkkebhmkfjojejmpbldmpobfkfo
找到油猴擴展的原始碼目錄 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions\dhdgffkkebhmkfjojejmpbldmpobfkfo\4.13_0 ，這個manifest.json文件寫得就複雜多了。
順便提下怎麼備份Chrome擴展，這樣方便遷移到新電腦使用，這個在之前文章也分享過了那些你可能不知道的谷歌瀏覽器實用技巧。導出生成的crx文件就可以分享給他人使用了。最後如果你想發布擴展到谷歌商店供他人安裝，可以在谷歌管理後臺提交你的擴展，不過需要5美元的費用。
油猴腳本編寫寫油猴腳本就更簡單了，先安裝好油猴擴展，在公眾號後臺回復油猴手動安裝，然後直接新建腳本。腳本內容如下：
// ==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';});
})();然後導出你寫的腳本文件，這樣方便給其他人安裝使用。同樣的也可以在 https://greasyfork.org/zh-CN/script_versions/new 發布你的腳本，比如之前分享過的油猴腳本實用油猴腳本推薦，讓你的谷歌瀏覽器更強大
除了寫Chrome擴展和油猴腳本，讓瀏覽器運行腳本還有個更簡單的方法就是書籤。
書籤先添加一個網頁到書籤然後修改，複製這段代碼到網址裡：javascript:"use strict";!(function(){document.querySelectorAll("a").forEach(function(item,index,arr){item.target='_blank';});})();使用的時候點擊網頁上方的新標籤打開網頁就行了，比Chrome擴展和油猴麻煩點。
順便分享2個書籤代碼，第一個是顯示密碼，默認輸入密碼的地方是星號*javascript:"use strict";!function(){for(var tag=document.getElementsByTagName("input"),i=0;i<tag.length;i++)"password"===tag[i].getAttribute("type")&&tag[i].setAttribute("type","text")}();
第二個是自由編輯網頁 javascript:"use strict";!function(){"true"===document.body.getAttribute("contenteditable")?(document.body.setAttribute("contenteditable",false),alert("關閉自由編輯網頁了！")):(document.body.setAttribute("contenteditable",true),alert("可以自由編輯網頁了！"))}();
最近原創文章：
帳號升級攻略：每天自動升級b站和網易雲音樂，自動籤到天翼雲盤和百度貼吧
2021 年身份證過期了會有什麼影響？
分享幾個微信實用小技巧
玩轉谷歌瀏覽器
玩轉公眾號
又一音樂神器APP，免費聽全網音樂，同時更新解鎖網易雲音樂變灰歌曲方法
2021 年 一鍵修改微信運動步數
如果文章對你有幫助還請 點讚/在看/分享 三連支持下， 感謝各位！
公眾號蘇生不惑掃描二維碼關注或搜索微信susheng_buhuo