干货开始啦！！！

首先，今天我们用到的是chrome浏览器，当然也有其他的浏览器如火狐浏览器（自己可以百度，查找资料），个人认为谷歌浏览器插件扩展还是蛮不错的（个人推荐！）；

步骤：
1，建立一个文件夹，命名为 ChromeExtend

2，在ChromeExtend这个文件夹中，建立一个manifest.json文件，作为这个程序的扩展配置文件，把需要填写的信息都可以放到这个json文件里，大概内容如下：

    {  
      "name":"我的Chrome插件之弹窗helloworld！",  
      "manifest_version":2,  
      "version":"1.0",  
      "description":"我的第一Chrome插件，持续更新中！",  
      "browser_action":{  
        "default_icon":"1.png"  
      }  
    }  

注释：“1.png”，可以随便抽出一个图片发到ChromeExtend这个文件中，它的作用就是来提示你安装的插件扩展程序，如我的安装成功后，会在你浏览器右上角扩展程序栏中

显示如下（下面有安装步骤）：

另外需要注意的是，json文件的字符子集为utf-8，统一管理；

其实到这，你已经完成了一大半了！！！

接下来，我们就开始用到谷歌浏览器，来安装你写到扩展程序了，打开谷歌扩展程序，选择如下图的“加载已解压的扩展程序”（我的是mac，windows系统也是勾选此选项，肯能文字描述不太一样吧）

然后便是你选中你刚才建立的那个ChromeExtend文件夹，选择“打开”便成功了！（看看你浏览器扩展程序栏中的右上角，有没有你刚才的“1.png”图片！！！）

3，接下来，我们便开始写我们的js（干货啊偷笑）

我们把helloword的代码添加上去，在manifest.json文件上添加以下代码：

    "content_scripts":[  
        {  
          "matches":["https://www.zhihu.com/*"],  
          "js":["my.js"]  
        }  
      ]  

注释：matches 里配置的是你的 要放入js的域名 ； js 便是你要执行的js代码；

以下就是my.js一句简单的代码：

    alert('Hello World!');  

这里我们看到了“content_scripts”，其实它的作用就是要让你的js在你需要的页面中之行，具体详细的配置信息，自己可以百度哦，这里就不多介绍啦！

4，写完后，在你扩展程序中，点击“重新加载”，如下图：

5，完美收官！

完成代码：

    {  
      "name":"我的Chrome插件之弹窗helloworld！",  
      "manifest_version":2,  
      "version":"1.0",  
      "description":"我的第一Chrome插件，持续更新中！",  
      "browser_action":{  
        "default_icon":"1.png"  
      },  
      "content_scripts":[  
        {  
          "matches":["https://www.zhihu.com/*"],  
          "js":["my.js"]  
        }  
      ]  
    }  

转载自：追梦人hqh，版权归作者所有，仅供学习。