怎样开发Chrome浏览器的插件[多图]

时间:2022-07-08 作者:admin

  chrome浏览器是一款开发者使用的浏览器,用户不仅可以使用浏览器搜索自己想要的内容,还可以使用浏览器制作自己想要的功能和插件,这才是这款浏览器最厉害的地方,那么这款软件要如何使用呢,那么今天就和小编一起来看看,这款软件到底要如何使用,快速帮助用户解决各种难题,让更多的用户可以获取自己想要的服务,有兴趣的用户就来一键搜索使用吧!非常的便捷,今天小编就会与大家一起来分享一下这款软件开发插件的过程和方法。

  怎样开发Chrome浏览器的插件

  创建一个单独的文件夹,起个名字吧,比如说我们为百度贴吧开发一个插件,就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件,在里面写上如下的样子。

  {

  "name": "TiebaAddin",

  "version": "1.0",

  "description": "An addin for Tieba.",

  "browser_action": {"default_icon": "icon.png"},

  "permissions": [http://*/*]

  }

  这里各项的意义很显然可以通过名字得之,但如果你想了解更多,请参考“Chrome扩展”文档(详见参考资料)

  如果你细心看上面的配置文件,你就会知道,你现在需要找一个图标,放在这个目录下,名字叫icon.png,当然,这个名字只要和上面的配置文件里default_icon的属性一致就好。

  现在,只要点击Chrome工具条的菜单按钮选择里面的工具(Tools)>> 扩展(Extensions)就好。菜单按钮如右图。

怎样开发Chrome浏览器的插件[多图]

  选择开发者模式,选择加载未打包的插件,然后,选择第一步中的那个文件夹即可。好吧,现在我们就可以启动插件了。

怎样开发Chrome浏览器的插件[多图]

  好了,在地址栏的右侧出现了我们的图标,但是点击图标却什么也没做,这是自然地,因为我们还什么代码没有写。现在在那个目录下,建立一个html文件,并且名字为popup.html,同时在配置文件里“browser_action”下加上一条:"popup": "popup.html"。示范:

  {

  "name": "TiebaAddin",

  "version": "1.0",

  "description": "An addin for Tieba.",

  "browser_action": {"default_icon": "icon.png","popup": "popup.html"},

  "permissions": [http://*/*]

  }

  此处注意,每一对大括号里的最后一项后面都没有逗号,其余的每项之间必须用逗号间隔!哪怕是browser_action这样复合的项目,在他的大括号后也要有逗号。

怎样开发Chrome浏览器的插件[多图]

  在Popup.html里写上一些html代码,比如简单的输出HelloWorld也好,这个Popup.html和普通的html文件按没有任何差别。这就是基本的插件制作方法