编写第一个Google插件
前言
Github:https://github.com/HealerJean
作为一个开发人员,用了那久就google插件,别人的插件那么好用,那我们自己为什么不能弄一个google插件呢
1、新建一个目录名字任意,google-helloword
2、新建4个空白文件
2.1、icon.png
为图片
3、编辑 manifest.json
google插件最重要的配置,下面很简单,傻子估计也能看懂是干什么的
{
"manifest_version":2,
"name":"google-hello",
"description":"google-hello",
"version":"1.0",
"permissions":[
"https://*/*",
"http://*/*"
],
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
}
}
4、编辑google点击页面 popup.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
<style>
body {
min-width: 400px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
</head>
<body>
<p id="p1">Hello World-1</p>
<p id="p2">Hello World-2</p>
<script src="popup.js"></script>
</body>
</html>
5、编辑js
document.getElementById("p1").innerHTML="Hello New World"
6、安装和展示
6.1、进入chrome://extensions/、打开开发者模式
6.2、点击打包扩展程序,将我们的包google-hello选中
6.3、点击打包扩展程序,提示我们生成了一个密文并且自动生成了一个crx文件
6.4、点击加载已解压的扩展程序-,选中这个google-hello开始调试
6.5、将上面生成的crx文件放到google中就是打包发布
6.6、测试