Chrome插件开发

最新推荐文章于 2024-08-05 09:42:33 发布

ggaofeng

最新推荐文章于 2024-08-05 09:42:33 发布

阅读量463

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/ggaofengg/article/details/53953889

web 专栏收录该内容

22 篇文章

订阅专栏

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工具栏就会出现插件的图标。

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