制作chrome插件

chrome插件制作

我一开始看网上教程的时候看的很懵,大家的chrome插件的教程都大多是给你个demo看看,看完了也不知道该怎么写自己想要的插件。

先推荐几个网址:

http://www.ituring.com.cn/article/110929  图灵社区的比较正规、可以出书的chrome插件学习文档(推荐)

http://open.chrome.360.cn/extension_dev/overview.html  360翻译的chrome插件手册(但是比较老,很久没更新)

https://developer.chrome.com/extensions (chrome自己的手册,缺点是需要FQ,一些api到这边来查比较好的)



在制作一个chrome插件过程中,manifest.json文件是非常重要的,它是chrome解读你插件需要chrome如何配合你,如何一点点实现的关键。大多教程里很少讲的很细,我这边不一定全,但是可以供参考。

做拓展插件:https://developer.chrome.com/extensions/manifest

做页面app:https://developer.chrome.com/apps/manifest

{
    "manifest_version": 2,
    "name": "哈哈哈",
    "version": "1.0",
    "description": "哈哈哈",
    "content_scripts": [
        {
            "matches": ["*://www.baidu.com/"],
            "js": ["do_something_in_baidu.js"]
        }
    ]
}

manifest大致就是上面这种样子的一个文件,然后细讲属性:

manifest_version:2             // 这个只能是2,貌似想在可用的版本就是2

name、author、book            // 应该都看得懂吧...不解释

version                               // 你插件的版本号(manifest_version、name、version是每一个manifest都必须要有的,不能缺)

default_locale                      // 默认文字,一般填en

description                          // 描述、简述

icons                                  // 一般提供16px、48px、128px三种,以对象格式声明

permission                          // 这个一般是允许什么网站通过你的插件(貌似是这个意思...错了可以帮我指出错误..)

browser_action                    //

content_scripts                   // 属性值为数组类型,数组的每个元素可以包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_blobs等属性。

// 其中matches属性定义了哪些页面会被注入脚本,exclude_matches则定义了哪些页面不会被注入脚本,css和js对应要注入的样式表和JavaScript,run_at定义了何时进行注入,all_frames定义脚本是否会注入到嵌入式框架中,include_globs和exclude_globs则是全局URL匹配,最终脚本是否会被注入由matches、exclude_matches、include_globs和exclude_globs的值共同决定

// 简单的说,如果URL匹配matches值的同时也匹配include_globs的值,会被注入;如果URL匹配exclude_matches的值或者匹配exclude_globs的值,则不会被注入。

// content_scripts中的脚本只是共享页面的DOM1,而并不共享页面内嵌JavaScript的命名空间。也就是说,如果当前页面中的JavaScript有一个全局变量a,content_scripts中注入的脚本也可以有一个全局变量a,两者不会相互干扰。当然你也无法通过content_scripts访问到页面本身内嵌JavaScript的变量和函数。



长期更新~~~

时间: 2024-10-10 13:56:44

制作chrome插件的相关文章

制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

chrome地址栏输入chrome://extensions/,可以看到当前谷歌浏览器的全部扩展程序 开启开发者模式,可以加载自己制作的扩展程序,或者把自己制作的扩展程序打包 打包第一扩展程序,生成crx插件和pem密钥 原文地址:https://www.cnblogs.com/shengulong/p/8946721.html

制作一个简单的百度网盘在线视频加速的chrome插件

原理: 在百度云视频的播放页面的控制台中输入以下语句,就可以将视频播放速度改为1.5倍 videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5); 使用插件将上面js代码注入到页面中就可以实现上面的效果. 源码:https://github.com/maoyonglong/bdyspeed 参考: 控制播放速度 chrome插件基本知识 原文地址:https://www.cnblogs.com/g

来说一说chrome扩展和chrome插件到底有什么区别?

想讨论chrome扩展和chrome插件区别这个话题很久了!但是迟迟没有写.因为我自己也没有搞清楚这两者之间的区别!回想当初是因为需要寻找番羽墙插件才想到去搜索到chrome插件. 想讨论chrome扩展和chrome插件区别这个话题很久了!但是迟迟没有写.因为我自己也没有搞清楚这两者之间的区别!回想当初是因为需要寻找番羽墙插件才想到去维护一个类似的插件网.我甚至问过身边很多程序员这两者之间的区别,说实话能说清楚的也没有几个.今日在论坛里看到有热心的网友推荐这个chrome网,甚是欣慰.但是看到

堪称神器的Chrome插件

相信很多人都在使用Chrome浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面,Chrome最大的优势还是其支持众多强大好用的扩展程序(Extensions). 最近为了更好的利用谷歌浏览器,我整理了一些常用的谷歌插件,分享给大家. 正文 闲话不多说,直接上推荐的插件,点击文章最后面左下角的“阅读原文”就可以获取所有插件的下载链接了~ 通用类插件 1.OneTab:将无数Tab合并在一个页面 很多时候我们在一个窗口打开太多的tab,每一个tab太小不容易管理,这时候使用OneTab

chrome插件one-read开发3:提升

阅读我的博客文章:chrome插件one-read开发:提升 前言 点击这里你可以看到one-read "一览" chrome版的使用 代码在这里:github code for one-read coding地址:coding.net for one-read 升级方式分析 通过定制version的方式进行用户通知更新 这种方式是用户手动更新,通过这种方式优点是可以满足用户的喜好,但是缺点就是用户需要卸载原本的程序后再安装 通过ajax调用远程代码方式进行更新 这种方式可以让用户没有

这是一款借助chrome 插件的微信机器人

1.chrome kit微信机器人简介(github:https://github.com/LinuxForYQH/chrome_kit) 借助chrome 插件 js注入来实现消息的发送 chrome devtool api的调用来监听https请求 打开微信登录界面,在扫码登录前必须先打开toolbar(F12 或者 鼠标右键检查),如上所说因为借助了chrome devtool api所以需要打开toolbar才能执行相关dev域的js. 2.相关开发原理介绍 https://develo

试着开发chrome插件

我的第一个chrome插件,是app形式的 代码如下 创建一个文件: 1.manifest.json 1 { 2 "version": "1.0", 3 "manifest_version": 2, 4 "app":{ 5 "launch":{ 6 "web_url":"http://www.cnblogs.com/zzzzw" 7 }, 8 "urls&q

chrome插件 postman插件 接口测试、API & HTTP 请求调试工具

Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试. 它能够发送任何类型的HTTP requests (GET, HEAD, POST, PUT..),附带任何数量的参数+ headers. 支持不同的认证机制(basic, digest, OAuth),接收到的响应语法高亮(HTML,JSON或XML). Postman 能够保留了历史的请求,这样我们就可以很容易地重新发送请求,有一个“集合”功能,用于存储所有请求相同的API/域. 这个扩展还有一些更

Android无线调试及手机设备与PC同屏工具——Chrome插件Vysor

我们平时用手机调试时,经常是手不离机,以前可以下载个jar包能把手机屏映射到电脑桌面,但是运行比较卡,后来就放弃了,再之,手机接数据线有时也不太方便 ,pc与手机(连wifi)如处同一网段,就可以通过无线来调试! 使用无线调式方法: 一:cmd开启命令窗口:(设置adbd 监听端口) adb  tcpip  5555 <设置adbd服务的端口> 二,cmd再开启另一个窗口:(开启adb网络调试模式) adb  connect  192.168.3.229:5555  <该地址为手机wif