什么是谷歌插件？
最簡(jiǎn)單的例子
1、創(chuàng)建配置文件 manifest.json，可以認(rèn)為是插件的入口文件
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
2、default_popup默認(rèn)彈框的頁面效果，創(chuàng)建文件 hello.html，可以當(dāng)場(chǎng)普通的頁面
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
可以在加載時(shí)，執(zhí)行腳本 popup.js
console.log('This is a popup!');
alert(1);
3、default_icon默認(rèn)圖標(biāo)，插件顯示的圖標(biāo)
那怎么安裝寫好的插件呢？
看看最終整體的效果
image.png
image.png
那插件中有錯(cuò)誤怎么告知我們呢
image.png
具體的錯(cuò)誤信息
image.png
疑問：直接在html中寫js, 為啥不能?
給它添點(diǎn)色彩，注意看最大的視圖窗口
<style>
h1{
width: 1000px;
height: 1000px;
color: red;
}
</style>
manifest.json中添加在每個(gè)網(wǎng)頁上運(yùn)行可以執(zhí)行的腳本
"content_scripts": [
{
"js": ["content.js"],
"matches": [
"https://www.baidu.com/*",
"https://developer.chrome.google.cn/*"
]
}
]
content.js內(nèi)容
console.log('This is a content!', document);
alert(2);
manifest.json中添加將腳本注入當(dāng)前標(biāo)簽頁中
"background": {
"service_worker": "background.js"
},
background.js內(nèi)容
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
