2021-05-12 14:32:11
chrome擴充套件開發：[9]Content Scripts
2019-12-19 10:32:45
簡單介紹Content Scripts
並通過範例加以說明
1
Content Scripts是執行在網頁上下文中的js指令碼，它可以讀取網頁的DOM，也可以修改。但不能存取網頁js中定義的函數和變數，也不能存取其它Content Scripts中定義的函數和變數。可以認為Content Scripts是被插入到網頁中了。
下面一段摘自官方文件：
2
Content Scripts主要用來幹什麼呢？作為初學者的話，可以簡單地認為它可以：讀取網頁資訊（文字，圖片等）修改網頁資訊模擬使用者操作（填充表單、點選按鈕等）代表網頁傳送ajax請求3
要把Content Scripts加入擴充套件，需要在manifest檔案中新增相關說明。
其中，js對應的是要插入的Content Scripts的js檔案陣列
matches對應的是一個字串陣列，每一項表示要插入其中的網頁的地址
更詳細的說明請存取官方文件
4
下一步我們做一個小例子，讀取csdn首頁裡的部分內容。以此來說明Content Scripts的使用。1
為了將Content Scripts加入到擴充套件當中，首先新建一個js檔案，放在test目錄下。可以命名為cs1.js，2
在manifest.json檔案裡新增以下說明，
"content_scripts": [ {
"js": [ "jquery-2.0.3.min.js","cs1.js"],
"matches": [ "*://www.csdn.net/*","file://*" ]
}]
由於我們用到了jquery庫，所以js檔案陣列裡要引入jquery-2.0.3.min.js，然後就是我們自己的js檔案cs1.js
matches里包含了要插入js檔案的url
修改後的manifest.json如下：
3
現在編輯cs1.js。注意cs1.js是執行在csdn網頁上下文中的。
我們想讀取csdn首頁的新聞列表，就是這部分：
4
它的html原始碼大約如下：
5
我們唯讀取連結的標題，所以可以些麼寫：function getCSDNNews(){var alist=$('.news_list ul li a');var len=alist.length;for(var i=0;i<len;i++){alert($(alist[i]).attr('title'));}}getCSDNNews();'.news_list ul li a' 是一個jquery的selectoralist得到的是新聞的<a>元素的列表$(alist[i]).attr('title') 用來獲取<a>元素的屬性title上面這段程式碼會在網頁剛載入時執行。6
重新載入擴充套件，然後開啟www.csnd.net，看到效果了吧
1
接上節，本節介紹模擬使用者點選，開啟我們剛剛讀取的<a>元素。
我們只點選第一個<a>。
在cs1.js中加一行程式碼：
alist[0].click();
2
重新載入擴充套件，重新整理csdn。
當點選萬alert視窗後，瀏覽器會把第一個<a>開啟
相關文章