Chrome插件开发

来源：互联网发布：java打印空心菱形图案编辑：程序博客网时间：2024/06/04 18:15

Chrome插件其实就是一个网页，再加一个json文件。

1、先创建一个空文件夹。

2、在文件夹中放一个网页。

popup.html

<!doctype html><html>  <head>    <title>My plugin</title>    <style>      body {        min-width: 357px;        overflow-x: hidden;      }</style><script src="popup.js"></script>  </head>  <body>hello world<br></body></html>

popup.js

document.addEventListener('DOMContentLoaded', function () {  var img = document.createElement('img');    img.src="big.png"      document.body.appendChild(img);              var input = document.createElement('input');        input.id="input1"      input.value=Date()      document.body.appendChild(input);});

两张图片（可以右键图片另存为，也可以用你自己的图片，图片格式gif也可以）。

验证网页是否正常。（把popup.html拖到浏览器中，可以看到网页显示正常。）

3、写一个json文件(文件名必须是这个)

manifest.json

{    "name": "Chrome gaofeng",    "version": "1.0.1",    "manifest_version": 2,    "description": "Chrome  gaofeng  description",        "browser_action": {      "default_icon": "small.png",      "default_popup": "popup.html"    }}

4、一个插件就做好了，验证一下吧。（我的chrome版本是 45.0.2454.93 m）

在开发者模式下，加载已解压的扩展程序，chrome工具栏就会出现插件的图标。

点击这个图标，就可以看到插件效果了，就是在一个小窗口打开了我们的网页。

1 0