Chrome Extension 扩展程序
前请说明：本文适用于之前从来没有接触过chrome extension扩展程序的同学~
编写demo
创建项目文件夹chrome_ext_demo，在项目根路径（chrome_ext_demo/）下创建 manifest.json
在manifest.json中添加如下示例（只是个简单例子，详细字段说明可参考官方文档）：
{
"name":"Chrome Extension demo",
"version":"1.0.0",
"manifest_version": 2,
"description":"Hello chrome extension.",
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"web_accessible_resources":[
"icon.png",
"popup.js"
],
"content_scripts": [
{
"matches": ["*://xxx.com/xxx/*"],
"js": ["content.js"]
}
]
}小小说明一下：
manifest_version的值必须是2，content_scripts.matches这个数组中的值表示我们希望匹配的域名，以*://baidu.com/*为例，这个表示只要域名是baidu.com，不论协议是什么，不论路径是什么，这个插件都生效~
根据web_accessible_resources和content_scripts中填写的icon.png、popup.html、popup.js、content.js文件路径得知，我们需要在chrome_ext_demo/下创建以下3个文件（PS：图片偷了下懒，随便找了一张图，不规范>.<）。
在popup.html添加如下代码：
<!DOCTYPE html>
<html>
<head>
<style>
body{
width:350px;
}
div{
border:1px solid #eeeaaa;
padding:20px;
font: 20px normal helvetica,verdana,sans-serif;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div>123</div>
</body>
</html>在popup.js添加如下代码：
function sayHello(){
var message = document.createTextNode("Hello chrome extension!");
var out = document.createElement("div");
out.appendChild(message);
document.body.appendChild(out);
}
window.onload = sayHello;在content.js添加如下代码：
alert(‘hi content!‘);其中，content.js是作用在目标域名目标路径（*://xxx.com/xxx/*）下的页面上的。
运行
打开chrome浏览器，进入chrome://extensions/，打开开发者模式，点击【加载已解压的扩展程序】，选中chrome_ext_demo文件夹，引入扩展
打包
在chrome://extensions/页面上，点击【打包扩展程序】，选中我们需要打包的扩展程序根目录，点击打包即可。
demo地址
欢迎访问我的github仓库进行下载：https://github.com/silencetea/demo-market/tree/master/chrome_ext_demo
本文链接：https://www.cnblogs.com/xsilence/p/10224499.html
原文地址：https://www.cnblogs.com/xsilence/p/10224499.html
时间： 2024-11-05 12:32:34