By

前言

Github：https://github.com/HealerJean

博客：http://blog.healerjean.com

作为一个开发人员，用了那久就google插件，别人的插件那么好用，那我们自己为什么不能弄一个google插件呢

1、新建一个目录名字任意，google-helloword

2、新建4个空白文件

2.1、icon.png为图片

WX20180829-182907@2x

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选中

WX20180829-183856@2x

WX20180829-183938@2x

6.3、点击打包扩展程序，提示我们生成了一个密文并且自动生成了一个crx文件

WX20180829-184015@2x

6.4、点击加载已解压的扩展程序-，选中这个google-hello开始调试

WX20180829-184111@2x

WX20180829-184206@2x

6.5、将上面生成的crx文件放到google中就是打包发布

6.6、测试

WX20180829-184300@2x

ContactAuthor