整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果您是 Google Chrome 用戶，您可能已經(jīng)在瀏覽器中使用了一些擴(kuò)展程序。
你有沒(méi)有想過(guò)如何自己建造一個(gè)？在本文中，我將向您展示如何從頭開始創(chuàng)建 Chrome 擴(kuò)展程序。
BD新標(biāo)簽頁(yè)
順便一提，BD新標(biāo)簽頁(yè)就是我個(gè)人開發(fā)的一款Chrome擴(kuò)展，有興趣的朋友可以安裝試試哦
chrome 擴(kuò)展程序是安裝在 Chrome 瀏覽器中的程序，用于增強(qiáng)瀏覽器的功能。您可以使用 HTML、CSS 和 JavaScript 等 Web 技術(shù)輕松構(gòu)建一個(gè)。
創(chuàng)建 chrome 擴(kuò)展程序類似于創(chuàng)建 Web 應(yīng)用程序，但它需要一個(gè)manifest.json文件，我們將在本文的最后一節(jié)中討論該文件。
UK-Chrome 擴(kuò)展的最新 Covid 報(bào)告
如您所見，上述 chrome 擴(kuò)展顯示了英國(guó)冠狀病毒 (COVID-19) 的最新數(shù)據(jù)。我們將在這篇博文中研究如何創(chuàng)建這個(gè)擴(kuò)展。
在這里，我們將使用https://api.coronavirus.data.gov.uk/v1/data API 來(lái)獲取數(shù)據(jù)。為簡(jiǎn)單起見，我們將僅顯示最新記錄。
這個(gè)項(xiàng)目的完整源代碼可以在GitHub上找到。
首先，我們需要?jiǎng)?chuàng)建一個(gè)空文件夾，我們將在其中添加 HTML、CSS 和 JavaScript 文件。
在該文件夾中，讓我們使用以下 HTML 樣板代碼創(chuàng)建一個(gè) index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>現(xiàn)在，讓我們?cè)?head 標(biāo)簽中添加一個(gè)指向 Bootstrap CDN 的鏈接。我們將在這里使用Bootstrap 框架，這樣我們就不必在此示例中編寫一些額外的 CSS。
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>在演示中，我們看到記錄顯示為表格。所以現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)表。
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">Covid Latest Report-UK</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Country</th>
<th>Confirmed</th>
<th>Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td id="date"></td>
<td id="areaName"></td>
<td id="latestBy"></td>
<td id="deathNew"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
上面的代碼創(chuàng)建了一個(gè)寬度為450px. 表格中有四個(gè)不同的標(biāo)題：Date、Country、Confirmed和Deaths。
在這里，您可以看到每個(gè)表數(shù)據(jù)td都被分配了不同的 ID。我們將在 JavaScript 中使用這些 ID 的值來(lái)更新表數(shù)據(jù)。另外，這里我們?cè)诩虞d完所有 HTML 內(nèi)容后，最后加載了 JavaScript。
現(xiàn)在，由于表格已顯示，我們需要編寫 JavaScript 以便從 API 獲取數(shù)據(jù)。
讓我們創(chuàng)建一個(gè)script.js文件并添加以下代碼：
async function fetchData() {
const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
const record=await res.json();
document.getElementById("date").innerHTML=record.data[0].date;
document.getElementById("areaName").innerHTML=record.data[0].areaName;
document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();現(xiàn)在，讓我們分解上面的代碼：
如果我們檢查瀏覽器，我們將能夠看到以下結(jié)果。
數(shù)據(jù)是從 API 中獲取的，一旦 API 中的數(shù)據(jù)發(fā)生變化，它就會(huì)不斷更新。
正如我們之前所討論的，構(gòu)建 Chrome 擴(kuò)展程序類似于構(gòu)建任何 Web 應(yīng)用程序。唯一的區(qū)別是 Chrome 擴(kuò)展需要一個(gè)manifest.json我們保存所有配置的文件。
manifest.json 文件包含構(gòu)建 Chrome 擴(kuò)展程序所需的所有必要信息。它是擴(kuò)展檢查的第一個(gè)文件，所有內(nèi)容都是從這個(gè)文件加載的。
現(xiàn)在，讓我們?cè)诟募A中創(chuàng)建一個(gè)manifest.json文件并添加以下代碼：
{
"name": "Covid-19 Stats UK",
"version": "1.0.0",
"description": "latest covid data of UK",
"manifest_version": 3,
"author": "Sampurna Chapagain",
"action":{
"default_popup": "index.html",
"default_title": "Latest Covid Report"
}
}我們的manifest.json文件包含name, version, description,的值manifest_version（在本例中為 3，這是最新的清單版本），author, 和action字段。在 action 字段中，它的值default_popup包含指向index.html本示例中的 HTML 文件的路徑。
您可以在這里查看文件的所有配置manifest.json。
現(xiàn)在，由于我們還添加了 manifest.json 文件，我們準(zhǔn)備將此項(xiàng)目添加為 Chrome 瀏覽器中的擴(kuò)展。
為此，我們需要轉(zhuǎn)到Select More Tools然后Extensions從瀏覽器菜單中進(jìn)行選擇，如下圖所示：
導(dǎo)航到 Chrome 中的擴(kuò)展程序
選擇擴(kuò)展后，它會(huì)重定向到 Chrome 中的擴(kuò)展頁(yè)面。確保在Developer mode此處啟用。
完成后，您需要單擊Load unpacked允許我們將項(xiàng)目加載到 Chrome 擴(kuò)展程序商店中的按鈕。
現(xiàn)在，該擴(kuò)展程序可在我們的 Chrome 擴(kuò)展程序商店中使用。您還可以將擴(kuò)展固定在瀏覽器中，如下面的 gif 所示：
將擴(kuò)展固定到瀏覽器
此擴(kuò)展僅適用于您的瀏覽器。如果你想在 Chrome Web Store 上發(fā)布它，你可以點(diǎn)擊這個(gè)鏈接。
如果您有一些 HTML、CSS 和 JavaScript 知識(shí)，則可以輕松構(gòu)建 Chrome 擴(kuò)展。我希望在閱讀完這篇博文后，您將創(chuàng)建一些很酷的擴(kuò)展。
快樂(lè)編碼！
首先，創(chuàng)建一個(gè)項(xiàng)目chrome-plugins-x，在里面創(chuàng)建一個(gè)manifest.json文件
// manifest.json
{
"name": "插件名稱",
"description": "插件描述",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"https://lofter.com/*" // 作用的網(wǎng)頁(yè)
],
"js": [
"content.js" // 對(duì)網(wǎng)頁(yè)進(jìn)行操作的文件，后面創(chuàng)建
]
}
]
}根據(jù)上面json文件的描述，我們創(chuàng)建一個(gè)content.js文件，對(duì)網(wǎng)頁(yè)進(jìn)行操作
// content.js
window.onload = function () {
// 實(shí)際執(zhí)行的操作
// 這里我們寫一個(gè)alter操作，直接看效果，先運(yùn)行成功再豐富細(xì)節(jié)
alter('123')
}接下來(lái)我們?cè)赾hrome上打開擴(kuò)展程序的頁(yè)面 chrome://extensions/ （在地址欄直接輸入這個(gè)地址即可）
如圖打開開發(fā)模式
點(diǎn)擊 加載已解壓的擴(kuò)展程序
選擇剛才創(chuàng)建的項(xiàng)目文件夾即可
然后我們打開目標(biāo)網(wǎng)頁(yè)（比如上面的manifest.json文件我寫的是weibo這個(gè)網(wǎng)頁(yè)，那么我就直接打開https://weibo.com），可以看到彈出我們剛才寫的alter，說(shuō)明加載成功。那么接下來(lái)可以刪掉alter，寫一些真正想要插件執(zhí)行的事件。
接下來(lái)我們具體操作一下content.js文件，首先我們應(yīng)該知道目標(biāo)頁(yè)面的dom結(jié)構(gòu)，然后通過(guò)操作dom元素。
舉例我們想要寫一個(gè)獲取所有頁(yè)面中所有文章標(biāo)題和內(nèi)容的方法，那么第一步我們應(yīng)通過(guò) 右鍵--檢查 查看我們要獲取的元素的結(jié)構(gòu)
如圖我們可以看出，整篇文章包含在一個(gè)className為m-icnt的div元素中，其中標(biāo)題為className為tit的h2元素。那么我們就可以這么操作：
window.onload = function () {
this.fetchDocs();
}
function fetchDocs() {
const docs = [];
const docsElement = document.querySelectorAll('.m-icnt');
for (let doc of docsElement) {
const title = (doc.querySelector('.tit'))?.textContent;
const content = doc?.textContent;
docs.push({ title, content });
}
console.log(docs);
}當(dāng)我們更新代碼時(shí)，要在瀏覽器上看到效果，在擴(kuò)展程序頁(yè)面點(diǎn)擊刷新按鈕即可
當(dāng)我們已經(jīng)可以通過(guò)content.js文件，從頁(yè)面中獲取文章之后。我們希望能夠點(diǎn)擊插件圖片，彈出一個(gè)頁(yè)面彈出框，文章就列在上面。那么首先第一步，需要在manifest.json文件中添加彈出框頁(yè)面
// manifest.json
{
"name": "插件名稱",
"description": "插件描述",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"https://lofter.com/*" // 作用的網(wǎng)頁(yè)
],
"js": [
"content.js" // 對(duì)網(wǎng)頁(yè)進(jìn)行操作的文件，后面創(chuàng)建
]
}
]
}創(chuàng)建popup.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 style="min-width: 200px;text-align: center;">插件彈出框頁(yè)面</h2>
</body>
</html>效果：
當(dāng)我們使用原生js將獲取到的數(shù)據(jù)操作顯示到頁(yè)面上的時(shí)候，稍微會(huì)比較繁瑣，也不利于dom結(jié)構(gòu)一目了然，因此我們引入Vue來(lái)寫這個(gè)彈出框。
首先將vue的js文件下載并放入項(xiàng)目中，然后在popup.html文件中引用。然后創(chuàng)建popup.js文件并引入。這里，當(dāng)引用vue文件的時(shí)候，需要在manifest.json中添加content_security_policy字段，解開引用權(quán)限
manifest.json
{
...
"content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ;"
...
}popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 最外層這個(gè)div的id必須為app，與js文件的#app相對(duì)應(yīng) -->
<div id="app" style="min-width: 200px;text-align: center;">
{{message}}
</div>
<script src="./dist/vue@2.6.6.js"></script>
<script src="popup.js"></script>
</body>
</html>popup.js
new Vue({
el: '#app',
data: {
message: '通過(guò)Vue完成的插件彈出框頁(yè)面',
},
methods: {
},
created: function () {
}
});效果：
Vue引用的時(shí)候，也可以不下載js文件直接引用網(wǎng)址（如：https://cdn.bootcss.com/vue/2.6.6/vue.js ），只需要在content_security_policy字段將對(duì)應(yīng)的域名添加上去。但缺點(diǎn)是有時(shí)候網(wǎng)速不足夠快的時(shí)候，拉取遠(yuǎn)程地址的Vue需要的時(shí)間會(huì)使得點(diǎn)擊插件的時(shí)候并不會(huì)立刻彈出框，這時(shí)候會(huì)使得用戶誤以為插件功能點(diǎn)擊后無(wú)反應(yīng)（或隨機(jī)反應(yīng)，在不同的網(wǎng)速下，彈出框有時(shí)候點(diǎn)一下彈出來(lái)有時(shí)候不出來(lái)，體驗(yàn)不好）。
// manifest.json
{
...
// 重點(diǎn)是這一行，打開了從遠(yuǎn)程地址獲取vue的權(quán)限，這一行的重點(diǎn)在于其中添加了vue的引用地址的域"https://cdn.bootcss.com"
"content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;",
...
}然后將popup.html引用vue的那一行script標(biāo)簽變更為
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>接下來(lái)我們將在content.js文件中獲取到文章標(biāo)題顯示到彈出頁(yè)面中來(lái)，那么首先我們希望當(dāng)點(diǎn)擊插件按鈕，顯示彈出框時(shí)，由popup.js文件向content.js文件發(fā)出獲取文章列表的請(qǐng)求，再由content.js文件操作dom獲取文章列表，返回給popup.js文件，popup.js文件通過(guò)Vue同步渲染到popup.html頁(yè)面中。
這里我們可以通過(guò) chrome.tabs.sendMessage 發(fā)送消息
通過(guò)chrome.runtime.onMessage.addListener 監(jiān)聽并返回消息
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="(item, index) in docs" :key="index" style="min-width: 300px;">
<h4>{{item.title}}</h4>
</div>
</div>
<script src="./dist/vue@2.6.6.js"></script>
<script src="popup.js"></script>
</body>
</html>popup.js
new Vue({
el: '#app',
data: {
docs: []
},
methods: {
init() {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {}, (res) => {
this.docs = res;
});
});
},
},
created: function () {
this.init();
}
});content.js
let docs;
// 監(jiān)聽消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
fetchDocs();
sendResponse(docs);
});
function fetchDocs() {
docs = [];
const docsElement = document.querySelectorAll('.m-icnt');
for (let doc of docsElement) {
const title = (doc.querySelector('.tit'))?.textContent;
const content = doc?.textContent;
docs.push({ title, content });
}
}效果：
還有一點(diǎn)，chrome插件限制了require/import/export等方法，因此如果想要拆分文件，從其他js文件中引用方法，只能通過(guò)html頁(yè)面script標(biāo)簽引用的方式
比如在popup.html文件中可以：
<script src="./dist/vue@2.6.6.js"></script>
<script src="util.js"></script>
<script src="popup.js"></script>如果是content.js文件的話，需要在manifest.json文件中添加：
"content_scripts": [
{
"matches": [
"https://lofter.com/*"
],
"js": [
"util.js",
"content.js"
]
}
]我們將創(chuàng)建一個(gè)“Hello, Extensions”示例，在本地加載擴(kuò)展。
首先創(chuàng)建一個(gè)新目錄來(lái)存儲(chǔ)擴(kuò)展文件。如果您愿意，可以從GitHub下載完整的源代碼 https://github.com/justinzm/chrome-extensions-learning。
接下來(lái)，在此目錄中創(chuàng)建一個(gè)名為的新文件manifest.json并添加以下代碼：
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}這個(gè) JSON 對(duì)象描述了擴(kuò)展的功能和配置。例如，該"action"鍵聲明 Chrome 應(yīng)使用的圖像作為操作的圖標(biāo)，以及在單擊操作時(shí)在彈出窗口中顯示的 HTML 頁(yè)面。
將到您的目錄，并確保更改其名稱以匹配"default_icon"密鑰中的內(nèi)容。
對(duì)于彈出窗口，創(chuàng)建一個(gè)名為 的文件hello.html，并添加以下代碼：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<h1>Hello Extensions</h1>
<div>你好 擴(kuò)展</div>
</body>
</html>注意：顯示中文需要添加 "<meta http-equiv="content-type" content="text/html;charset=utf-8">" 避免出現(xiàn)亂碼。
在開發(fā)者模式下加載一個(gè)解壓的擴(kuò)展：
擴(kuò)展已成功安裝。因?yàn)榍鍐沃袥](méi)有包含擴(kuò)展圖標(biāo)，所以將為擴(kuò)展創(chuàng)建一個(gè)通用圖標(biāo)。
讓我們回到代碼，把擴(kuò)展名改成“Hello Extensions of the world！” 在清單中。
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}保存文件后，要在瀏覽器中查看此更改，您還必須刷新擴(kuò)展。轉(zhuǎn)到擴(kuò)展頁(yè)面并單擊開/關(guān)切換旁邊的刷新圖標(biāo)：
在開發(fā)過(guò)程中，您可以通過(guò)訪問(wèn)瀏覽器控制臺(tái)日志來(lái)調(diào)試代碼。在這種情況下，我們將找到彈出窗口的日志。首先將腳本標(biāo)簽添加到hello.html.
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>創(chuàng)建一個(gè)popup.js文件并添加以下代碼：
console.log("This is a popup!")要查看控制臺(tái)中記錄的此消息：
5.在DevTools中，導(dǎo)航到控制臺(tái)面板。
現(xiàn)在讓我們打破擴(kuò)展。我們可以通過(guò)刪除引號(hào)來(lái)做到這一點(diǎn)popup.js：
console.log("This is a popup!) // ? broken code轉(zhuǎn)到擴(kuò)展頁(yè)面并打開彈出窗口。將出現(xiàn)一個(gè)錯(cuò)誤按鈕。
有很多方法可以擴(kuò)展項(xiàng)目；但是，您必須將 manifest.json 文件放在擴(kuò)展的根目錄中。下面是一個(gè)結(jié)構(gòu)示例：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
