js寫一個chrome 插件


訪問網站的時候,最煩的就是一些彈窗和廣告。於是,就想着能不能在訪問特定網站的時候,執行一段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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM