如何制作网页插件（如何制作chrome浏览器插件）

：暂无数据 2026-08-16 01:15:10 ：0

本篇文章给大家谈谈如何制作网页插件，以及如何制作chrome浏览器插件对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

本文目录

如何制作chrome浏览器插件
如何制作Maxthon的插件
如何制作chrome插件，可以用jquery修改已知网页DOM
那种淘宝比价网页插件是怎么制作的

如何制作chrome浏览器插件

　　方法如下：

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

　　{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"},
***隐藏网址***
}　　

　　2、现在需要找一个图标，放在这个目录下，名字叫icon.png，当然，这个名字只要和上面的配置文件里default_icon的属性一致就好。

　　3、现在只要点击Chrome工具条的菜单按钮选择里面的工具（Tools）》》扩展（Extensions）就好。菜单按钮如右图。

　　4、选择开发者模式，选择加载未打包的插件，然后，选择第一步中的那个文件夹即可。

　　5、在地址栏的右侧出现了图标，但是点击图标却什么也没做，因为我们还什么代码没有写。现在在那个目录下，建立一个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"},
***隐藏网址***
}
此处注意，每一对大括号里的最后一项后面都没有逗号，其余的每项之间必须用逗号间隔！哪怕是browser_action这样复合的项目，在他的大括号后也要有逗号。

　　6、在Popup.html里写上一些html代码，比如简单的输出HelloWorld也好，这个Popup.html和普通的html文件按没有任何差别。

　　7、这就是基本的插件制作方法。

如何制作Maxthon的插件

Maxthon浏览器的一个特色就是支持各类插件，通过插件可以很大程度上扩展Maxthon的功能，用着别人制作的各种插件，你有没有自己做一个插件的想法呢。其实，制作一款简单插件并不困难，只要你有一点DIY的精神，加上本文的指导，就可以做出一款属于自己的插件，show给朋友们看看。
简述插件的原理
插件可以理解为一些已经包含某些功能的小模块。Maxthon的插件分为2种，一种是扩展插件栏插件，一种是侧边拦插件。扩展插件栏的插件需要编制程序来实现功能，制作起来有一定的难度。而侧边拦插件一般都是通过网页链接来实现需要的功能，制作难度不大，本文将会教你如何制作侧边拦插件。
制作自己的msn插件
侧边拦插件由2部分组成——网页文件和配置设置文件。网页文件就是在插件栏中显示的内容，配置设置文件负责调整各项设置。现在msn messenger非常流行，我们就制作一款msn messenger的插件，通过Maxthon就可以登录到你的msn messenger。
首先制作一张网页，很简单，只要式样美观即可。网页中也可以使用图片，让网页看上去漂亮一些。至于制作的软件，用frontpage或者dreamweaver都可以。注意，由于是在插件栏中显示，所以网页中的内容都要靠左边对齐，宽度和高度也不要太大，否则在使用时会很不方便。（见图2）
screen.width-600)this.style.width=screen.width-600;"》
图2
***隐藏网址***
***隐藏网址***
下面就是配置设置文件了。建立一个新建文本文档，然后改名为plugin.ini。注意，文件名一定要是plugin，后缀名是ini。然后双击打开，输入以下的内容。注意格式，每行一条设置，一条设置一行放不下的话可以放到下一行，但是不能一行放两条设置的内容。

Name=最新的msn
Author=zzsoft
Version=1.0
ModuleType=script
FileName=mymsn.htm
Comments=This Plugin can enable you use msn messenger via webbrowser.
Type=M2Plugin_Sidebar
HotIcon=msn.ico
Icon=msn.ico
Name就是插件的名称，可以在 = 号后面输入你取的名字。
Author是作者名称，你可以输入你自己的名字。
Version是版本号，这个你也可以自己定义。
ModuleType是模块类型，按照上文进行设置。
FileName就是你制作的那张网页的名称，注意不要打错。另外还要注意你制作的网页后缀面是htm还是html，要准确无误的输入。
Comments是对该插件的描述，你可以自己输入描述语句，这个对插件的功能没有任何影响。
Type是插件类型，因为是侧边拦插件，所以设置为M2Plugin_Sidebar
HotIcon是热点图标，也就是你把鼠标指针放在这个插件图标上显示的式样。这个关系不大，找一个图标文件就可以了，然后HotIcon值就是这个图标文件的文件名。
Icon就是这个插件的在侧边拦显示的图标，同样找一个图标文件就可以了，然后Icon值就是这个图标文件的文件名。
好了，一款插件就制作完成了，下面我们需要将这个插件安装到Maxthon中来使用它。
***隐藏网址***
（网页有点慢，需要半分钟左右才能显示完全）

如何制作chrome插件，可以用jquery修改已知网页DOM

第一步：新建一个文件夹，创建一个文件manifest.json

文件内容：

{
  "manifest_version": 2,
  "name": "用jquery搞事情",
  "description": "使用jquery操作dom",
  "version": "1.0",
  "icons": {
    "128" : "icon.png"
  },
  "permissions": [
***隐藏网址***
  ],
  "content_scripts": [
    {"js":,"matches":[
***隐藏网址***
]}
  ]
}

js：你要引入的js文件，这里引入jquery和你要搞事情的js文件（所有的文件都要放到这个文件夹里）

metches：匹配的网站,可以加*模糊匹配，也可以写多个匹配网站

do-something.js内容：（只是举个例子，你可以随便写）

console.log("脚本加载成功！！");
//下面可以尽情的搞事情了。
$("#su").val("百度两下");

第二步：打开chrome的扩展程序界面，选择开发者模式，加载已解压的扩展程序，然后选择你的文件夹就可以了。

看一下效果：

搞定。