谷歌插件开发（1）-hello world程序

最新推荐文章于 2024-04-27 17:18:40 发布

梧桐下的四叶草

最新推荐文章于 2024-04-27 17:18:40 发布

阅读量773

点赞数

分类专栏：谷歌插件开发文章标签： html5 javascript 插件浏览器谷歌

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52972744

版权

谷歌插件开发专栏收录该内容

3 篇文章 1 订阅

订阅专栏

学习HTML5和JAVASCRIPT已经有段时间了，所以想做一些在生活中有用的东西。这里一下子就想到浏览器上的插件了.之后就是百度一番，找到了一个学习的好网址：传送门。这是一个360的官方文档，感觉写的不错。废话不说，立刻做一个hello world程序。

第一步，首先在桌面（或其它地方）新建一个文件夹，然后需要新建两个文件。一个是manifest.json，一个是popup.html文件。

每一个插件都有一个manifest.json文件来规定插件的一些信息，所以这个可以参考一下文档，而我要写的只是一个简单的插件，所以直接就使用一些东西就好了。代码如下：

manifest.json:

{
    //插件的名字
    "name":"Hello World",
    //manifest文件自身格式的版本号
    "manifest_version": 2,
    //自己写的插件的版本，在谷歌扩展程序中可看
    "version":"1.0",
    //插件的信息描述，在谷歌扩展程序中可看
    "description":"The first extension that I made.",
    //可以在chrome主工具条的地址栏右侧增加一个图标
    "browser_action":{
        //默认图标
        "default_icon":"icon.png",
        //默认弹出的文件
        "default_popup":"popup.html"
    },
    //扩展或app将使用的一组权限。（必须写，就算没内容）
    "permissions":[
    ]
}

popup.html:

<!doctype html>
   <html>
     <head>
       <title>Getting Started Extension's Popup</title>
       <style>
         body {
           min-width: 357px;
           overflow-x: hidden;
         }
  
        img {
          margin: 5px;
          border: 2px solid black;
          vertical-align: middle;
          width: 75px;
          height: 75px;
        }
      </style>
    </head>
    <body>
        hello world!
    </body>
  </html>

写完了这两个文件之后，我们就要进入到谷歌的扩展程序里面了，如果不会进入的，请百度一下，如何进入，这里不详细说了。进入了之后，就能看到如下的按钮，

点击第一个按钮之后，选到我们刚才新建的那一个文件夹就成功安装了一个插件了。之后在浏览器的页面就会看见多了一个图标。

点击这个图标就会显示我们在popup.html文件所做的操作显示出来了。

完整项目：传送门

梧桐下的四叶草

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
谷歌插件开发（1）-hello world程序

学习HTML5和JAVASCRIPT已经有段时间了，所以想做一些在生活中有用的东西。这里一下子就想到浏览器上的插件了.之后就是百度一番，找到了一个学习的好网址：传送门。这是一个360的官方文档，感觉写的不错。废话不说，立刻做一个hello world程序。第一步，首先在桌面（或其它地方）新建一个文件夹，然后需要新建两个文件。一个是manifest.json，一个是popup.html文件。
复制链接

扫一扫