精华内容
下载资源
问答
  • chrome插件开发

    2013-03-06 09:54:44
    chrome插件开发的内部培训文档,适合chrome插件开发0基础人群
  • Chrome插件开发

    2012-07-25 11:20:27
    这是有关Chrome插件开发的文档。掌握HTML、JavaScript技术就可以开发chrome插件。
  • chrome插件开发文档

    2017-12-19 15:30:43
    chrome插件开发文档 chrome插件开发文档 chrome插件开发文档
  • Chrome插件开发指南

    2018-03-30 10:27:12
    Chrome插件开发指南---有开发chrome插件的同学可以学习一下
  • Chrome插件开发.pdf

    2021-09-30 16:29:52
    Chrome插件开发.pdf
  • Chrome插件开发完整demo

    2019-08-13 04:57:13
    Chrome插件开发完整demo
  • Chrome插件 Chrome 插件开发中心
  • chrome 插件开发各种功能demo,囊括绝大多数功能demo。
  • Chrome扩展及应用开发-高清扫描-chrome插件开发必,我已经验证过了,是很清楚的,并且很完整的.
  • chrome插件开发

    2018-09-22 23:20:26
    chrome插件 很好用 自己开发经常用 不好用退钱 哈哈真的好用 下载吧
  • chrome 插件开发入门实例

    千次阅读 2019-02-18 14:48:31
    以前记录一些简单的信息时使用记事本比较多,虽然非常方便但是记事本不能自动保存,重启或者死机后信息容易丢失,平时使用chrome比较多,所以就研究了一下chrome插件开发,并开发一块简单,方便的便签插件,截图如下...

    之前记录一些简单信息使用记事本比较多,虽然非常方便但是记事本不能自动保存,重启或者死机后信息容易丢失,平时使用chrome比较多,所以就研究了一下chrome插件开发,开发一款简单,方便的便签插件,截图如下:
    在这里插入图片描述
    这款插件的代码非常简单,是一个入门 chrome 插件开发非常好的例子,源代码已经开源在 github 上面,想要入门 chrome 插件开发的可以查看源码:

    • github地址:https://github.com/daoket/Easy-Notes
      下载后安装步骤如下图,首先开启开发者模式,之后点击加载扩展程序,选择下载的文件夹点击确认就可以了,调试时修改源码后刷新浏览器即可。
      在这里插入图片描述

    想要直接安装使用的可以点击下面的链接,该链接需要科学上网

    参考资料:

    1. 官方文档:https://developer.chrome.com/extensions/apps
    2. Chrome插件开发全攻略: https://github.com/sxei/chrome-plugin-demo
    3. 插件发布地址: https://chrome.google.com/webstore/developer/dashboard/g11805587606963152839
    展开全文
  • chrome插件开发,学习js dom 很好的教材
  • Chrome插件开发之CSDN博客阅读模式-附件资源
  • chrome 插件开发入门

    2018-08-08 09:36:40
    简单介绍开发一个chrome的步骤,清晰易懂;简单介绍开发一个chrome的步骤,清晰易懂
  • chrome插件开发入门 后续还有chrome更深的讲解

    准备工作

    编写chrome插件只需要简单的文本编辑器,如notepad++ sublime text、记事本等都可以。

    开始制作第一个插件

    创建一个新的目录,并创建文件manifest.json(后缀为.json),用记事本打开写入以下代码

    {
        "name":"第一个Chrome插件",
        "version":"1.0",
        "manifest_version": 2,
        "description":"一段描述文字",
        "browser_action": {
            "default_icon": "plus_64.png"
        }
    }

    将plus_64.png文件拷贝至manifest.json所在目录

    安装插件

    首先打开chrome插件管理页面
    这里写图片描述
    点击右上角开发人员模式,点击加载已解压的扩展程序,导入插件所在目录,这时插件图标就会显示在chrome工具栏上。
    这里写图片描述
    给chrome插件添加一些新的东西
    虽然完成了第一个插件,但没有什么实际的功能。下面我们给他添加点功能。
    编辑manifest.json文件

    {
        "name":"第一个Chrome插件",
        "version":"1.0",
        "manifest_version": 2,
        "description":"一段描述文字",
        "browser_action": {
            "default_icon": "plus_64.png",
            "default_popup":"test.html"
        }
    }
    

    添加default_popup属性,然后新建文件test.html文件,编辑test.html文件

    <p>Hello,Chrome!</p>

    写到这里熟悉html的同学 就可以发动自己的脑洞 开发自己的chrome插件了。

    重新加载插件

    这里写图片描述
    这就是一个简单的可以弹出窗口的chrome插件。

    打包chrome插件

    在chrome插件管理页面,点击打包扩展程序,选择插件所在目录,就会在插件目录同层级生成一个.crx文件和一个.pem文件。
    将.crx文件发送给其他人就可以安装这个插件把.crx拖进Chrome插件管理页面内,就会把这个应用安装在Chrome里。
    .pem是程序签名文件,新版本的开发中还需要这个文件,不要删除它。

    展开全文
  • chrome插件开发-页面对象注入及本地通信 代码包含了应用页面内的js对象注入,js对象与backgroud.js的通信以及backgroud.js与本地程序的通信
  • chrome插件开发入门

    千次阅读 2017-06-26 10:30:12
    chrome 插件开发文档,首推官网文档  https://developer.chrome.com/extensions/api_other ,但是官网是外网,不一定能访问的到, 于是撸主给你另外一个地址 ...

    1 文档

    chrome 插件开发文档,首推官网文档 

    https://developer.chrome.com/extensions/api_other ,但是官网是外网,不一定能访问的到, 于是撸主给你另外一个地址 https://chajian.baidu.com/developer/extensions/manifest.html#overview.html ,百度浏览器提供了文档,你懂的,国内的浏览器内核大多数都是chrome...

    2 插件目录结构说明

    就以我写的这个插件为例吧, 基础的插件用我这个目录结构基本上够了,如果想开发复杂的插件,建议先看看一些demo。

    解压缩之后,插件的目录结构如下

    这个目录结构一看应该都很明白,css用来放置css文件,js放置js文件,fonts放置字体配置,lib放置一些公共js包。

    其中最重要的文件是manifrest.json, 这个是门面文件,说白了,chrome谁都不认,只认它,我们打开文件看一下

    {
       "manifest_version" : 2,   //版本,默认是2
       "background" : {
           "scripts" : [  "/lib/jquery.js" ]  
        },
       "name" "Getting started example" ,
       "description" "This extension shows a Google Image search result for the current page" ,
       "version" "1.0" ,
       "browser_action" : {
         "default_icon" "icon.png" ,      //这个就是插件的图标啊
         "default_popup" "popup.html" ,   //首页,或者称之为入口页面
         "default_title" "切换账号小工具"
       },
       "permissions" : [   //这个属性表示你想访问chrome的哪些东西,chrome是有权限控制的
         "browsingData" ,    //我要访问data
         "activeTab" ,   //我要访问激活的tab
         "tabs" //我要访问chrome的标签页
         "<a href="https://ajax.googleapis.com/" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">https://ajax.googleapis.com/" , "<a href="http://%2A/*" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://*/*" , "<a href="https://%2A/*" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">https://*/*" ,  //插件可能需要ajax调用接口,如果你需要调用其它接口,比如跟数据工厂打通,这里就必须的了
         "cookies" ,   //操作cookie必备
         "contextMenus"  //菜单栏操作
       ]
    }

     

    其中必须的属性是 name、 version、manifest_version

    1. name 名称
    2. version 你插件的版本号
    3. manifest_version  配置文件清单的格式,现在的chrome都是支持2的,貌似也没有最新的版本了

    description: 描述,这个可有可无,优秀的实践是必须的,当然,我这个不是优秀的...

    browser_action: 所谓browser_action,通俗一点就是告诉浏览器怎么用你这个插件,放在哪,显示成什么样子。

    permissions:权限控制,用于告诉浏览器你的插件想要访问哪些东西,申请chrome授权用的,常见的权限有:

    "tabs", 访问浏览器选项卡

    "activeTab", 获取当前活动选项卡

    "notifications", 浏览器通知(基于HTML5的通知实现)

    "storage", 存储,希望存储一些设置的话,就需要用到

    "http://*/*","https://*/*" 这个一般都懂的吧,这个不懂的话,感觉你可以放弃了...
    cookies 如果你要访问cookie的话,这个也是必须的,操作cookie,可以增删改查了

    详细的清单权限

    权限

    描述

    "activeTab"

    根据 activeTab 规范请求授予应用权限。

    "alarms"

    使您的应用能够访问 chrome.alarms API。

    "browsingData"

    使您的应用能够访问 chrome.browsingData API。

    "clipboardRead"

    如果应用或应用使用 document.execCommand('paste') 则必须指定。

    "clipboardWrite"

    表示应用或应用可以使用 document.execCommand('copy') 或document.execCommand('cut')托管应用必须指定该权限,建议应用和打包应用也指定该权限。

    "contextMenus"

    使您的应用能够访问 chrome.contextMenus API。

    "cookies"

    使您的应用能够访问 chrome.cookies API。

    "geolocation"

    允许应用或应用使用提议的 HTML5 地理定位 API 而不需要提示用户权限。

    "management"

    使您的应用能够访问 chrome.management API。

    "nativeMessaging"

    使您的应用能够访问原生消息通信 API

    "notifications"

    允许应用使用提议的 HTML5 通知 API 而不用调用权限方法(例如 checkPermission())。有关更多信息,请参见桌面通知

    "pageCapture"

    使您的应用能够访问 chrome.pageCapture API。

    "power"

    使您的应用能够访问 chrome.power API。

    "proxy"

    使您的应用能够访问 chrome.proxy API。

    "storage"

    使您的应用能够访问 chrome.storage API。

    "system.cpu"

    使您的应用能够访问 chrome.system.cpu API。

    "system.display"

    使您的应用能够访问 chrome.system.display API。

    "system.memory"

    使您的应用能够访问 chrome.system.memory API。

    "system.storage"

    使您的应用能够访问 chrome.system.storage API。

    "tabs"

    使您的应用能够访问 Tab 对象的特权字段,包括 chrome.tabs 和 chrome.windows 在内的多种 API 都使用 Tab 对象。在很多情况下,您的应用不需要声明 "tabs" 权限就能使用这些 API。

    "tts"

    使您的应用能够访问 chrome.tts API。

    "ttsEngine"

    使您的应用能够访问 chrome.ttsEngine API。

    "unlimitedStorage"

    提供无限的存储空间,保存 HTML5 客户端数据,例如数据库以及本地存储文件。如果没有这一权限,应用或应用的本地存储将限制在 5 MB 以内。

    注意:该权限仅应用于网络 SQL 数据库以及应用程序缓存(参见问题 58985)。另外,当前还不能和包含通配符的子域名一起使用,例如http://*.example.com

    "webNavigation"

    使您的应用能够访问 chrome.webNavigation API。

    "webRequest"

    使您的应用能够访问 chrome.webRequest API。

    "webRequestBlocking"

    如果应用以阻塞方式使用 chrome.webRequest API 则必须指定。

    "default_popup"属性,表明入口html

    这个属性要重点关注,这个属性表明了你的插件用哪个html渲染,我的插件里面配置的是

    3.2 插件常用api

    所谓插件api,就是chrome暴露给你的api,你想访问浏览器上的东西,或者操作浏览器上的东西,必须经过他给的标准API进行

    我的插件里面里面用到了chromes.tab相关的api,主要就是获取当前tab的url,然后呢就是解析,登录,发送事件之类的,都是js的逻辑,用了jquery框架。另外用了Storage存储数据,storage不同于cookie,cookie是由失效的,但是storage可以一直用奥~~

    详细的api文档可参考

    名称

    描述

    最低版本

    alarms 

    使用 chrome.alarms API 安排代码周期性地运行或者在将来的指定时间运行。

    22

    browserAction 

    使用浏览器按钮可以在百度浏览器主窗口地址栏右侧的工具栏中添加图标。除了图标,浏览器按钮还可以有工具提示徽章弹出内容

    5

    commands 

    使用命令 API 添加快捷键,以便触发应用中的操作,例如打开浏览器按钮或向应用发送命令。

    25

    contextMenus 

    使用 chrome.contextMenus API 向百度浏览器的右键菜单添加项目。您可以选择您在右键菜单中添加的项目应用于哪些类型的对象,例如图片、超链接和页面。

    6

    cookies 

    使用 chrome.cookies API 查询和修改 Cookie,并在 Cookie 更改时得到通知。

    6

    extension 

    chrome.extension API 包含任何应用页面都能使用的实用方法。它包括在应用和内容脚本之间或者两个应用之间交换消息的支持,消息传递中详细描述了这些内容。

    5

    i18n 

    使用 chrome.i18n 架构为您的整个应用或应用实现国际化支持。

    5

    idle 

    使用 chrome.idle API 检测计算机空闲状态的更改。

    6

    management 

    chrome.management API 可以用来管理已经安装并且正在运行的应用或应用。

    8

    notifications 

    使用 chrome.notifications API 通过模板创建丰富通知,并在系统托盘中向用户显示这些通知。

    28

    pageAction 

    使用 chrome.pageAction API 在地址栏中添加图标。页面按钮代表用于当前网页的操作,但是不适用于所有网页。

    5

    pageCapture 

    使用 chrome.pageCapture API 将标签页保存为 MHTML。

    18

    permissions 

    使用 chrome.permissions API 在运行时而不是安装时请求声明的可选权限,这样用户可以理解为什么需要这些权限,并且仅在必要时授予这些权限。

    16

    power 

    使用 chrome.power API 修改系统的电源管理特性。

    27

    proxy 

    使用 chrome.proxy API 管理百度浏览器的代理服务器设置。该模块依赖于类型 API 中的 ChromeSetting 原型,用于获取和设置代理服务器配置。

    13

    runtime 

    使用 chrome.runtime API 获取后台网页、返回清单文件详情、监听并响应应用或应用生命周期内的事件,您还可以使用该 API 将相对路径的 URL 转换为完全限定的 URL。

    22

    storage 

    使用 chrome.storage API 存储、获取用户数据,追踪用户数据的更改。

    20

    system.cpu 

    使用 chrome.system.cpu API 查询 CPU 元数据。

    32

    system.memory 

    使用 chrome.system.memory API 获取内存信息。

    32

    system.storage 

    使用 chrome.system.storage API 查询存储设备信息,并在连接或移除可移动存储设备时得到通知。

    30

    system.display 

    使用 chrome.system.display API 查询显示器的元数据。

    30

    tabs 

    使用 chrome.tabs API 与浏览器标签页交互。您可以使用该 API 创建、修改或重新排列浏览器中的标签页。

    5

    tts 

    使用 chrome.tts API 播放合成的文字语音转换(TTS),同时请您参见相关的 ttsEngine API,允许应用实现语音引擎。

    14

    ttsEngine 

    使用 chrome.ttsEngine API 在应用中实现文字语音转换(TTS)引擎。如果您的应用注册了该 API,当任何应用或百度浏览器应用使用 tts 模块朗读时,它会收到事件,包含要朗读的内容以及其他参数。您的应用可以使用任何可用的网络技术合成并输出语音,并向调用方发送事件报告状态。

    14

    webNavigation 

    使用 chrome.webNavigation API 实时地接收有关导航请求状态的通知。

    16

    webRequest 

    使用 chrome.webRequest API 监控与分析流量,还可以实时地拦截、阻止或修改请求。

    17

    windows 

    使用 chrome.windows API 与浏览器窗口交互。您可以使用该模块创建、修改和重新排列浏览器中的窗口。

    5

    bidu 

    使用 chrome.bidu API 进行扩充自定义接口信息。如果当前的接口不能完整的满足您的需求,您可以向我们提出专门的功能接口申请。

    38

     

    3 API使用的代码案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    loginHomeSite: function (username, passwd){
         var  script =  "window.setTimeout(function(){document.getElementsByClassName('pc-tag')[0].click();document.getElementsByName('username')[0].value='" +username+ "';document.getElementsByName('password')[0].value='" +passwd+ "';document.getElementsByClassName('login-btn')[0].click()},1000);" ;
         chrome.tabs.getSelected( null , function (tab){ 
          console.log(tab.url);
          var  currentUrl = tab.url;
          if  (currentUrl.startsWith( "<a href="http://accounts.meili-inc.com/" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://accounts.meili-inc.com" )){
            chrome.tabs.executeScript(tab.id,{code:script,runAt: "document_end" });
          } else  {
           if  (currentUrl.startsWith( 'chrome://' )) currentUrl =  'http://home.meili-inc.com/' ;
           var  ourl =  "<a href="http://accounts.meili-inc.com/enter?redirect=" "="" style="color: rgb(59, 115, 175); text-decoration-line: none; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">http://accounts.meili-inc.com/enter?redirect=" +currentUrl;
           redirect(tab.id, ourl);
           window.setTimeout( function (){chrome.tabs.executeScript(tab.id,{code:script, runAt: "document_end" , allFrames: true });}, 1000);
          }
         });
       },

    代码说明:

    chrome.tabs.getSelected 是调用chrome.tabs的api,获取当前选中的tab,然后在其回调函数中,function(tab){}, tab表示当前选中的tab,获取tab.url,并且判断当前url

    是否是统一登录入口,如果是的话,就直接在页面上执行js脚本登录,如果不是的话,就先重定向到统一登录页面,填写用户名密码登录

    4 插件调试

    调试插件,右击选择某个插件,然后点击审查元素,然后就能使用chrome自带的调试器进行调试的拉

    另外透露个小技巧,所有插件的源代码都在

    /Users/xiuzhu/Library/Application\ Support/Google/Chrome/Default/Extensions/目录下(此为mac系统,其它系统请自行脑补),然后就可以找到代码自己去玩了~

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,230
精华内容 26,492
关键字:

chrome插件开发