Chrome Extension 扩展程序 小白入门

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_resourcescontent_scripts中填写的icon.pngpopup.htmlpopup.jscontent.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

上一篇:Exception in thread "main" java.nio.channels.NotYetConnectedException


下一篇:Chrome浏览器扩展程序的本地备份