引用地址：https://blog.csdn.net/m0_37729058/article/details/79485302
1.前言
由於最近公司項目開發需要，學習了一段時間的chrome extension開發。使用chrome extension開發的優點是學習門檻非常的低，主要使用的就是js,css,html。前端最常用的三個東西，，另外去研讀一下chrome提供的接口，會使用即可。開發起來可謂是 非常方便。不過缺點也是有的，開發的控件只能限定於部分使用webkit的瀏覽器使用（chrome的內核確切的說是Chromium引擎,它是使用蘋果公司的WebKit作為瀏覽器內核原型,是WebKit內核的一個分支）
一般來說，只要你有前端開發經驗，，花一天時間閱讀文檔，即可快速上手chrome extension。這里給帖出文檔的鏈接：
360文檔 360文檔實則是chrome文檔的翻譯版，一模一樣，就是有些年頭了，更新內容里面可能沒有。
chrome官方文檔這個是官方文檔，，各種接口demo一應俱全，，就是需要FQ和英文水平較好。
2.實現內容
這個主要實現從一個網站內抓取需要的數據，再放置到另外一個頁面上。需要對chrome extension api和結構有一定的了解，，不了解的小伙伴先去文檔學習一下。
3.詳細代碼
（1）基礎內容分析
本次使用的是vs code開發工具演示，首先上一下結構圖
左邊的就是目錄結構。這里詳細說一下：
首先是image文件夾下方，放置的是圖標文件，最好19像素左右，太大了會被壓縮。
然后是js文件夾，這里面的文件是主要實現功能的文件：
1.background.js 是一個常駐的頁面，它的生命周期是插件中所有類型頁面中最長的，它隨着瀏覽器的打開而打開，隨着瀏覽器的關閉而關閉，所以通常把需要一直運行的、啟動就運行的、全局的代碼放在background里面，也是數據交互常用到的文件。
2.content-script.js 這個文件實際上是我們插入打開頁面的js代碼，和打開頁面共用一個DOM但是和頁面的js是隔離的，相互無法調用。每打開一個頁面就會有一個content-script.js生產並 運行。
3.jquery.js(非必須) 這個看個人喜好，方便之后代碼書寫。
4.popuop.js 這個就是我們運行的擴展程序的js文件，他只能控制擴展程序。
接下來是manifest.json,這個文件是整個程序的配置文件，非常重要，這里面上個圖說明下
“name”: “XXXXXXXX”,
“version”: “XXXXXXX”,
“manifest_version”: 2,
這些字段是必須的，注意manifest_version值必須是2。
description： 是程序描述。
browser_action： 這里使用的是browser，還可以使用page,app等，里面的屬性對應的是 圖片地址 提示信息 擴展程序展示頁面。
backgroud ： 上面有提到過，算是程序常駐后台的代碼。
content_script ： matches表示匹配的地址 指的就是所有，js指的就是說注入頁面的js文件。
最后是popup.html 這里面擴展程序的展示頁面。
還不明白的小伙伴調至這里 manifest.json屬性詳解
（2）代碼實現
既然明白了結構，接下來就要開始開發了。
先是文件配置：manifest.json
{
"name": "Copy Data Extension",
"manifest_version": 2,
"version": "1.0",
"description": "The extension for copy data.",
"browser_action": {
"default_icon": "image/showpicture.png",
"default_title": "Copy Data",
"default_popup": "popup.html"
},
"background": {
"scripts": ["js/background.js"]
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "js/jquery-1.12.4.min.js", "js/content-script.js" ]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
這里面沒有什么特別的內容，正常配置，上面解釋過。
擴展程序頁面：popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
這里面引用了需要的js文件，兩個按鈕用來操作抓取和放置數據。
這個文件就確定了我們程序的樣子：
背景頁：background.js
window.data = null;
1
2
這里提供個數據公共使用即可。
由於數據的抓取和放置比較繁瑣，拆開解釋，最后有合並的代碼
數據抓取：popuo.js && content-script.js
************************** popup.js *****************************
$(function () {
$("#btnCopy").click(function () {
// chrome.tabs.query可以通過回調函數獲得當前頁面的信息tabs
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
// 發送一個copy消息出去
chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
// 這里的回調函數接收到了要抓取的值，獲取值得操作在下方content-script.js
// 將值存在background.js的data屬性里面。
var win = chrome.extension.getBackgroundPage();
win.data=response;
console.log(response);
});
});
});
});
************************** content-script.js *****************************
//監聽消息
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "copy") {
//收到copy信息，開始獲取當前頁面id為sb_form_q的值
var ctrl = $("#sb_form_q");
if (ctrl.length > 0) {
// 如果獲取的值不為空則返回數據到popup.js的回調函數
if (sendResponse) sendResponse(ctrl.val());
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
以上就是抓取部分，可以獲得需要的數據並保持起來。不太好明白的都有注釋，基本上很容易理解。
放置數據到另一頁面：popuo.js && content-script.js
************************** popup.js *****************************
$(function () {
$("#btnPaste").click(function () {
// 將之前抓取到的並保存的data數據從background.js取出
var win = chrome.extension.getBackgroundPage();
if (win.data) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
// 將之前抓取的數據發送
chrome.tabs.sendMessage(tabs[0].id, { action: "paste", data: win.data }, function (response) {
console.log(response);
});
});
}
});
});
************************** content-script.js *****************************
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "paste") {
// 收到paste消息和之前抓取的值
var ctrl = $("#input");
if (ctrl.length > 0) {
// 將值放入目標網頁的id為input的輸入框中
ctrl.val(request.data);
sendResponse("OK");
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
其實放置數據就是抓取翻過來，接下來放整體代碼。
popup.js
$(function () {
$("#btnCopy").click(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
var win = chrome.extension.getBackgroundPage();
win.data=response;
console.log(response);
});
});
});
$("#btnPaste").click(function () {
var win = chrome.extension.getBackgroundPage();
if (win.data) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "paste", data: win.data }, function (response) {
console.log(response);
});
});
}
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
content-script.js
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "copy") {
var ctrl = $("#sb_form_q");
if (ctrl.length > 0) {
if (sendResponse) sendResponse(ctrl.val());
} else {
alert("No data");
}
} else if (request.action === "paste") {
var ctrl = $("#input");
if (ctrl.length > 0) {
ctrl.val(request.data);
sendResponse("OK");
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
4.添加到chrome和效果演示
經過上面的代碼，功能已經完成了。下來將擴展添加到chrome里面，並且展示效果。
添加到chrome
將所有的文件放置文件夾內。
打開谷歌瀏覽器，地址欄輸入chrome://extensions/
勾選上開發者模式，並點擊加載已解壓的擴展程序 選中文件夾
使用控件
我們控件抓取數據的網址是 微軟Bing搜索，放置數據的網址是 360搜索
想抓取或放置其他網址的小伙伴，，將抓取和放置那一部分代碼用來獲取數據或賦值的id換成你需要抓取或放置頁面input的id即可
1.先在抓取網址（微軟Bing搜索）目標input框中輸入點數據，並點擊右上角之前添加的擴展程序，選擇copy.
2.接着找到放置網頁（ 360搜索 ），點擊Paste,就把我們的數據自動就放上去了。
寫在最后
chrome加載擴展的時候，有時可能會有BUG，，如果小伙伴，代碼寫完之后功能無法實現。。可以嘗試打開擴展程序頁面Ctrl+R（重新加載），同時刷新你的抓取頁面和放置頁面，就會有效果啦！！
————————————————
版權聲明：本文為CSDN博主「爆裂吧葉子」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_37729058/article/details/79485302