chrome插件研發手冊

chrome插件研發手冊

一：需求前景

                對於研發的小夥伴來講，總會遇到這樣的需求，想要經過代碼操做已有網站的行爲動做，如：自動填充表格內容（表單內容太多，想一鍵將表單內容填充）；自動登陸網站（網站登陸密碼總是忘記，或者用戶名密碼太長，想一鍵登陸）……；對於這些需求均可以經過瀏覽器插件的方式解決，咱們這裏就以chrome插件來論述

二：參考資源

                http://open.chrome.360.cn/extension_dev/overview.html

三：跟我學

1.如何打包

（參考：http://open.chrome.360.cn/extension_dev/packaging.html）

點擊如圖所示位置打包項目文件夾（第一次打包對應的祕鑰不須要提供，打包完成後會自動生成，以後在打包就須要這個生成的祕鑰了）

 

2.如何調試

（參考：http://open.chrome.360.cn/extension_dev/tut_debugging.html）

打開chrome://extensions/，並保證是開發者模式，點擊如圖所示地方，就能夠轉到插件調試位置

調試popup：對這插件鼠標右鍵選擇inspect popup

，調試它由於它的初始化是在插件安裝到瀏覽器上時就初始化了，全部從新加載這個popup達到調試的目的須要在console執行parent.location.reload();從新刷新此頁面

調試background：須要插件配置了background，再打開下面所示位置

調試contentscript：在配置的指定頁面打開開發者頁面就能夠看到你所插入的contentscript腳本了，contentscript與頁面本來的js腳本是兩個獨立環境，不能相互調用對方方法的

3.插件中popup,background,contantscript消息傳遞機制

                        總結：background會一直在後臺運行，contantscript通過配置加載在指定頁面，但在指定頁面關閉時，對應腳本就不會運行了，popup腳本會一直運行；他們之間消息的傳遞規則以下（一直要運行的腳本通常放在background中，popup通常做爲插件頁面展現）

參考：https://blog.csdn.net/summerxiachen/article/details/78698878

            4.如何解決popup頁面中的跨域訪問

                        主要原理：popup不能跨域只能插件中發送接收消息，可是background，contantscript就能夠跨越操做（須要在配置文件中添加上指定域的地址）

                        參考：https://blog.csdn.net/summerxiachen/article/details/78698878

            5. 在popup中建立tab,同時頁面定位到新tab頁，回調函數不會被觸發

參考：https://stackoverflow.com/questions/37089887/callback-of-chrome-tabs-create-is-not-triggered-in-a-popup

 四：follow me demo

                個人例子：搭建一個單點登陸（一個認證中心，一個插件客戶端用來實現自動登陸效果的）SSO方案v2.0.docx