什么是谷歌插件？
最简单的例子
1、创建配置文件 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"
}
}
2、default_popup默认弹框的页面效果，创建文件 hello.html，可以当场普通的页面
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
可以在加载时，执行脚本 popup.js
console.log('This is a popup!');
alert(1);
3、default_icon默认图标，插件显示的图标
那怎么安装写好的插件呢？
看看最终整体的效果
image.png
image.png
那插件中有错误怎么告知我们呢
image.png
具体的错误信息
image.png
疑问：直接在html中写js, 为啥不能?
给它添点色彩，注意看最大的视图窗口
<style>
h1{
width: 1000px;
height: 1000px;
color: red;
}
</style>
manifest.json中添加在每个网页上运行可以执行的脚本
"content_scripts": [
{
"js": ["content.js"],
"matches": [
"https://www.baidu.com/*",
"https://developer.chrome.google.cn/*"
]
}
]
content.js内容
console.log('This is a content!', document);
alert(2);
manifest.json中添加将脚本注入当前标签页中
"background": {
"service_worker": "background.js"
},
background.js内容
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
网友评论