訪問網站的時候,最煩的就是一些彈窗和廣告。於是,就想着能不能在訪問特定網站的時候,執行一段js腳本,去除頁面的廣告。於是乎,好像 chrome 插件可以實現。
這里,以 百度 的網站為例
新建 simple01 文件夾:
內部文件結構如圖:
主要是 manifest.json的配置:
{ "manifest_version":2, "version":"1.0.0", "name":"myAdSafe", "description":"百度插件", "browser_action":{}, "permissions":["*://www.baidu.com/"], "background":{}, "content_scripts":[{ "matches":["*://www.baidu.com/"], "js":["index.js"], "run_at":"document_end", "all_frames":true }] }
manifest_version
manifest文件內容格式的版本,目前版本為2,本次介紹的格式都是基於該版本的.
version
該瀏覽器插件的版本。
name
該瀏覽器插件的名稱。
description
該瀏覽器插件的描述信息。
browser_action
瀏覽器插件的工具欄圖標。
permissions
瀏覽器插件需要的權限,支持正則匹配。google對於安全性是相當重視,該配置也是重要的環節!
background
瀏覽器插件后端程序,大部分瀏覽器插件api,以及https網站都需要后端程序來完成。如:獲取瀏覽器插件的版本號。
content_scripts
頁面注入配置。例如:向域名為xx的注入一串輸出hello world的腳本,就需要該配置,同時也需要配置擁有該域名xx的權限。
頁面如何注入scripts文件
1.manifest.json permissions配置
"permissions":["*://www.baidu.com/"],
2.manifest.json content_scripts配置
"content_scripts":[{ "matches":["*://www.baidu.com/"], "js":["index.js"], "run_at":"document_end", "all_frames":true }]
matches: 需要注入的腳本頁面的URL,支持正則表達式。
js: 注入的腳本文件,相對路徑。
run_at: 注入的位置,document_start文檔的開始,document_idel文檔的中間 , document_end文檔的末尾。
all_frames: 是否全frame注入,比如頁面使用了iframe或者frame。
3.編寫 index.js
語法為javascript,當然你也可以引入jquery,方式和 index.js 一樣
index.js 中輸入內容:
document.getElementById("kw").value = "插件自動輸入";
其主要是在 瀏覽器打開百度的時候,輸入框自動填充內容
4.安裝插件進入瀏覽器:
和安裝其他插件一樣,直接在上面頁面,打開開發模式。。然后直接將,simple01 文件拖入
瀏覽器即可。
5、打開 百度:
注意: 網址配置后面一定要有斜桿,否則會報錯
既然能夠開發插件了,那么就可以針對自己常用的網站,,,進行自己的定制腳本了
更多內容可以查看: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html