Chrome擴展開發02--擴展中的基本操作01

1、操作用戶正在瀏覽的頁面，即JS注入

所謂操作用戶正在瀏覽的頁面，實際上就是操作頁面的DOM。我們通過manifest.json文件中的content_scripts屬性，可以指定將哪些js腳本何時注入到哪些頁面中。當頁面被訪問時，Js腳本就會自動執行。

manifest.json中的content_scripts屬性的值為數組類型，包含matches、exclude_matches、css、js、run_at、all_frames、include_globs、exclude_globs屬性。

注意，這裡被注入的Js腳本只共享頁面的DOM，並不共享頁面中自帶Js的命名空間！即被注入的Js腳本和自帶的Js之間是互不干擾的。

2、跨域請求

所謂跨域請求，即Chrome擴展中允許JS通過XMLHttpRequest請求不同域的數據。雖然允許，但必須在manifest.json文件中，通過permissions屬性聲明需要跨域的許可權。

在進行跨域請求的時候，要注意一點，所有的XMLHttpRequest請求都是非同步調用的，是不阻塞代碼的，所以需要一個callback回調函數，具體見下邊的例子。

《Chrome擴展及應用開發》中實戰一個顯示用戶IP的擴展。

（1）編寫manifest.json文件，主要添加permissions屬性，用來聲明需跨域訪問的網址：

（2）編寫popup.html文件，主要是聲明一個div用於顯示IP地址，並指定JS文件地址：

（3）編寫my_ip.js文件，通過跨域請求得到IP地址：

擴展運行的效果：

3、Chrome擴展常駐後台

我們有時候需要Chrome擴展程序自動運行並常駐後台，用來實時監控或更新一些東西。比如郵件更新提醒、後台音樂播放等。

這裡涉及到兩種頁面：後台頁面和UI頁面。Chrome擴展中頁面與頁面之間是可以相互通信的，UI頁面需要更新數據時可以向後台頁面發送請求，後台頁面監測到狀態改變時，也會通知UI頁面進行更新。

在manifest.json文件中通過background屬性指定後台頁面的相關配置，其主要包含：

》scripts屬性：指定後台運行的JS腳本文件

》page屬性：指定後台運行的頁面，一般不設置，因為後台運行不需要頁面

》persistent屬性：定義常駐後台的方式，默認為true，表示擴展一直在後台運行。若為false，則表示擴展在後台按需運行，這樣可以有效的減少對內存的損耗。

《Chrome擴展及應用開發》中實現一個後台監控Google網站狀態的實例。在manifest.json文件中設置background屬性，並指定後台運行的JS文件。同時需要聲明跨域訪問的網站。

在status.js文件中，通過定時訪問Google網站，監測其鏈接狀態。如果鏈接正常，則顯示綠色圖標，否則顯示紅色圖標。即更改icon。這裡使用了chrome.browserAction.setIcon的介面。

這裡的常駐後台，還可以是當瀏覽器不啟動的時候就啟動我們的擴展程序。只需要在manifest文件的permissions屬性中，添加background值。但一般不建議這麼使用。

=============================================================

作者主頁：笑虎（Python愛好者，關注爬蟲、數據分析、數據挖掘、數據可視化等）

作者專欄主頁：擼代碼，學知識 - 知乎專欄

作者GitHub主頁：擼代碼，學知識 - GitHub

歡迎大家拍磚、提意見。相互交流，共同進步！

==============================================================