精华内容
下载资源
问答
  • Chrome浏览器插件开发入门

    千次阅读 2018-11-11 08:48:09
    Chrome浏览器插件开发入门

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                   

    转载:http://ux.sohu.com/topics/5028aa0d88ba205052000407


    引子: Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的开放原始码网页浏览器。 该浏览器是基于其他开放原始码软件所撰写,包括WebKit和Mozilla,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。 软件的名称是来自于称作Chrome的网路浏览器图形使用者界面(GUI)。 软件的beta测试版本在2008年9月2日发布,提供43种语言版本,有支持Windows平台、Mac OS X和Linux版本提供下载。 2012年8月6日,Chrome已达全球份额的34%,成使用最广浏览器。


    Chrome插件的本质就是一个由 manifest.json 文件和插件所需要的图片,css,html,js资源组成的一个web页面,只是和传统的web页面不同的,它是以chrome浏览器为宿主运行的一个web程序。


    本文将教会大家为流行的Chrome制作一个简易的浏览器插件,作为大家chrome插件入门的第一课。


    首先新建一个文件夹来存放我们的chrome插件资源(图片,js,css,html)。在这个新建的文件夹里创建一个新文件,并修改文件名为 manifest.json 。打开新建的这个manifest.json 文件,敲入以下代码:

    1. {
    2.     "name": "NutUX SOHU-INC",
    3.     "version": "1.0.0",
    4.     "description": "搜狐技术部前端团队博客,关注前端",
    5.     "app": {
    6.         "launch": {
    7.             "web_url": "http://ux.sohu.com"
    8.         },
    9.         "urls": [ "http://ux.sohu.com" ]
    10.     },
    11.     "icons": {
    12.         "128": "nut_logo.png",
    13.         "48": "nut_logo.png",
    14.         "16": "nut_logo.png"
    15.     },
    16.     "requirements":{
    17.         "3D":{
    18.             "features":["css3d","webgl"]
    19.         }
    20.     }
    21. }



    大家可以看到 manifest.json文件,就是一个json格式标准的文件。

    • name 属性定义了插件的名称
    • version 定义了插件的开发版本号
    • description 定义了插件的详细描述信息
    • app 对象定义了要打开的URL地址
    • iocns 对象定义了几种不同尺寸的图标的地址
    • requirements 对象定义了需要用到资源权限 
      我们把所需要用到图标,也放入到manifest.json所在的文件夹中。


    以上,我们就完成了这个简单的chrome插件的开发工作。 


    下面要让他在chrome中运行起来。

    可以在chrome浏览器地址栏输入:

    1. chrome://chrome/extensions

    或者按照以下步骤,打开Chrome浏览器的扩展程序 enter image description here


    然后勾选开发人员模式

    enter image description here



    点击载入正在开发的扩展程序,把之前新建的存放manifest.json文件和logo图片资源的文件夹载入。chrome会自动识别manifest文件并加载图标,如果插件编写没有错误,则会在扩展程序中,添加我们刚刚开发的插件,如下图

    enter image description here



    并且在Chrome浏览器的应用程序页,会显示我们的插件图标的快捷方式: enter image description here



    至此,我们的第一个简单的chrome插件就开发完毕!



    是不是觉得很容易很简单呢,有了这个成功的开始,如果有兴趣,你也可以开发出功能更强大,效果更炫,体验更好的Chrome插件。


    下面推荐一些Chrome插件开发相关的资源,对chrome插件开发有兴趣的同学可以参考:

    1. Chrome官方开发指南
    2. 360浏览器开发小组翻译的Chrome官方插件开发文档
    3. Chrome Web Store 

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    你好! 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

    新的改变

    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    标记文本

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block var foo = 'bar'; 

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目 Value
    电脑 $1600
    手机 $12
    导管 $1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列 第二列 第三列
    第一列文本居中 第二列文本居右 第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPE ASCII HTML
    Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
    Quotes "Isn't this fun?" “Isn’t this fun?”
    Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to-HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N 是通过欧拉积分

    Γ(z)=0tz1etdt . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    gantt
            dateFormat  YYYY-MM-DD
            title Adding GANTT diagram functionality to mermaid
            section 现有任务
            已完成               :done,    des1, 2014-01-06,2014-01-08
            进行中               :active,  des2, 2014-01-09, 3d
            计划一               :         des3, after des2, 5d
            计划二               :         des4, after des3, 5d
    
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

    张三李四王五你好!李四, 最近怎么样?你最近怎么样,王五?我很好,谢谢!我很好,谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scripts文件 一、 浏览器插件的介绍  浏览器插件是一种遵循一定规范的应用程序接口编写出来的,是对其进行起一个补充作用的程序,如播放...

    http://www.cnblogs.com/oshine/p/5379349.html

    1. 浏览器插件的介绍
    2. Chrome浏览器插件开发的准备工作
    3. manifest.json配置介绍
    4. 页面如何注入scripts文件

    一、 浏览器插件的介绍

      浏览器插件是一种遵循一定规范的应用程序接口编写出来的,是对其进行起一个补充作用的程序,如播放Flash文件,浏览器本身是没有这个功能的,所以要通过插件来达到播放的功能。

    常用的浏览器插件有:

    Flash插件、RealPlayer插件、ActiveX插件、雅虎插件,百度,QQ, 搜狗,新浪,360网购,抢票工具等。

     

    二、Chrome浏览器插件开发的准备工作

     本文主要以google chrome浏览器作为教程,其他浏览器可以通过本次案例进行举一反三。

     Google chrome浏览器开发教程为英语,又加上中国大陆无法访问google chrome浏览器开发网站,让开发者带来一定的阻碍。

     其实开发插件非常简单,只要你具备javascript、html和css的知识,编写插件事半功倍。

     

    开发工具:

      浏览器:google chrome浏览器

      IDE:sublime text、notepad++、记事本、phpstorm等任一编辑器即可

     

    文件结构:

             simple01

                   |-- manifest.json  工程配置文件,主要文件。

                   |--xxx.js        执行脚本

                    |  --xxx.css    样式文件

                    | -- xxx.png   图片文件

     

    测试环境: 

     

    打包发布插件:

     

     

     

    发布升级版本:

     

     

    三、manifest.json配置介绍

    Manifest工程配置文件:manifest.json,最基础的文件,也是最重要的文件。

    从后缀可以看出它是JSON格式的文件,JSON格式的介绍:

    JSON   (JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 
        JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。
        这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

    来自百度百科

     

    案例如下:

     

     

     

    manifest_version

    manifest文件内容格式的版本,目前版本为2,本次介绍的格式都是基于该版本的.

     

    version

    该浏览器插件的版本。

     

    name

    该浏览器插件的名称。

     

    description

    该浏览器插件的描述信息。

     

    browser_action

    浏览器插件的工具栏图标。

     

    permissions

    浏览器插件需要的权限,支持正则匹配。google对于安全性是相当重视,该配置也是重要的环节!

     

    background

    浏览器插件后端程序,大部分浏览器插件api,以及https网站都需要后端程序来完成。如:获取浏览器插件的版本号。

     

    content_scripts

    页面注入配置。例如:向域名为xx的注入一串输出hello world的脚本,就需要该配置,同时也需要配置拥有该域名xx的权限。

     

     

    四、页面如何注入scripts文件

    了解如何注入scripts文件,我们先通过一个实例来了解。

    本次案例是如何在淘宝登录页面上自动输入用户名和密码。

     

     

    1.manifest.json  permissions配置

    "permissions":[
    
    "https://login.taobao.com/*"
    
    ]

    *正则匹配符

     

    2.manifest.json content_scripts配置

    复制代码

    "content_scripts":[
      {
    
        "matches":["https://login.taobao.com/*"],
    
        "js":["taobao_login.js"],
    
        "run_at":"document_end",
    
        "all_frames":true
    
      }
    ]

    复制代码

        matches: 需要注入的脚本页面的URL,支持正则表达式。

        js: 注入的脚本文件,相对路径。

        run_at: 注入的位置,document_start文档的开始,document_idel文档的中间 , document_end文档的末尾。

        all_frames: 是否全frame注入,比如页面使用了iframe或者frame。

     

    3.编写taobao_login.js

       语法为javascript,当然你也可以引入jquery。引入的配置为:

         

      本次案例为纯javascript,先查看淘宝的登录页面。

     

         通过页面DOM树的查看,我们得知用户名和密码输入的Dom标识。

     相应的taobao_login.js代码为:

    复制代码

    setTimeout(function(){
    
        var username = document.getElementById('TPL_username_1');
        username.focus();
        username.value = "oShine";
        var password =   document.getElementById('TPL_password_1');
        password.focus();
        password.value = "oShine";
        var submitStatic = document.getElementById("J_SubmitStatic");
        submitStatic.focus();
        setTimeout(function(){
            //检测是否需要安全验证
            var noCaptcha = document.getElementById("nocaptcha");
            if(noCaptcha && noCaptcha.className == "nc-container tb-login"
                && noCaptcha.style.display !="block") {
                var submitStatic = document.getElementById("J_SubmitStatic");
                if(submitStatic) submitStatic.click();
            }
        },2000);
    
    
    },3000);

    复制代码

     

     

    manifest.json:

    复制代码

    {
      "manifest_version": 2,
      "version": "1.0.1",
      "name": "淘宝自动登录助手",
      "description": "淘宝自动登录助手",
      "browser_action": {
    
      },
      "permissions": [
        "https://login.taobao.com/*"
      ],
      "background": {
    
      },
      "content_scripts": [
        {
          "matches": ["https://login.taobao.com/*"],
          "js": ["taobao_login.js"],
          "run_at": "document_end",
          "all_frames": true
        }
      ]
    }

    复制代码

    案例结束!!

    展开全文
  • 最近在进行chrome浏览器插件的开发,一些小的经验总结随笔。 1、首先,推荐360的... 2、从chrome18开始往后,chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式(固定)

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔。

    1、首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/overview.html

    2、从chrome18开始往后,chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式(固定)的声明了。

    3、chrome插件开发,很大程度上需要chrome.* API 的支持,附上chrome历史版本的API更新记录:http://lmk123.duapp.com/chrome/extensions/whats_new.html

    4、如果需要下载不同的chrome版本进行安装测试,推荐一个下载网址:http://www.mykurong.com/chrome/

    5、为chrome网页添加右键选项:

      首先,需要在 manifest.json 文件中添加权限支持:

      "permissions": [

      ...

      "contextMenus",

      ...

      ]

      

    复制代码
    chrome.contextMenus.create({
    "title" : "菜单项文字",
    "type" : "normal", //菜单项类型 "checkbox", "radio","separator"
    "contexts" : ["frame"], //菜单项影响的页面元素 "anchor","image"
    "documentUrlPatterns":["http://*.163.com/*"],//iframe的src匹配
    "targetUrlPatterns" : ["http://*.163.com/*"],//href的匹配
    "onclick" : changeSCHandler() //单击时的处理函数
    });
    复制代码

    6、插件通信:

      6.1 background.js 和 content_script.js 通信推荐使用 chrome.extension.sendRequest()、chrome.extension.onRequest.addListener(function(request, sender, sendRequest){}); 的形式。

      6.2 其他页面调用 background.js 里的函数和变量时推荐在其他页面使用 var backgroundObj = chrome.extension.getBackgroundPage(); if(backgroundObj){ backgroundObj.func(param); }的形式。

      6.3 如果插件运行中会有多个tab页同时打开和加载,则需要注意通信过程中使用 tab.id 参数,因为每个加载插件的tab页都会保留自己的一个 content_script.js 运行,所以和 content_script.js 通信时需要指定是向哪个tab页进行通信;获取当前打开的 tab 页的 id 可以使用 chrome.tabs.getSelected(function(tab){current_tab_id = tab.id;}); 的形式。

    7、关于 xmlhttprequest

      在chrome插件中可能会用到ajax请求,以及跨域请求的出现,推荐使用 xmlhttprequest,会比较稳定。但使用 xmlhttprequest 会有一个不完善的地方,就是在 chrome 中,xmlhttprequest 请求的HTTP requestHeaders 头不包含 Referer 数据,如果需要这个字段就必须对 chrome 的 xmlhttprequest 请求进行监听和修改,具体如下:

      

    首先,需要在 manifest.json 文件中添加权限支持:

      "permissions": [

      ...

      "webRequest", "webRequestBlocking",  //用于获取 xmlhttprequest 以及对 xmlhttprequest 进行 block 操作

      ...

      ]

    然后使用如下方式:

    复制代码
    var wR=chrome.webRequest||chrome.experimental.webRequest; //兼容17之前版本的chrome,若需要使用chrome.experimental,需要在 about:flags 中“启用“实验用。。API”
    if(wR){
        wR.onBeforeSendHeaders.addListener(
            function(details) {
                if (details.type === 'xmlhttprequest') {
                    var exists = false;
                    for (var i = 0; i < details.requestHeaders.length; ++i) {
                        if (details.requestHeaders[i].name === 'Referer') {
                            exists = true;
                            
                            break;
                        }
                    }
                    if (!exists) {//不存在 Referer 就添加
                        details.requestHeaders.push({ name: 'Referer', value: 'http://www.yourname.com'});
                    }
                    return { requestHeaders: details.requestHeaders };
                }
    },
            {urls: ["https://*.google.com/*","http://*.google.com/*"]},//匹配访问的目标url
            ["blocking", "requestHeaders"]
        );
    }
    复制代码

    8、题外:如何在页面中插入包含透明图片的顶层div

    复制代码
    var topDiv = document.createElement('div');
            topDiv.style.width=document.documentElement.scrollWidth+"px";
            topDiv.style.height=document.documentElement.scrollHeight+"px";
            topDiv.style.position="absolute";
            topDiv.style.left=0;
            topDiv.style.top=0;
            topDiv.style.zIndex = 999;
            var title = document.createElement('a');
            var img = document.createElement('img');
            img.src = "http://.../.../transparent.gif";
            img.setAttribute("width","100%");
            img.setAttribute("height","100%");
            title.appendChild(img);
            topDiv.appendChild(title);
            document.getElementsByTagName('body')[0].insertBefore(topDiv,document.getElementsByTagName('body')[0].childNodes[0]);
    复制代码

    在document中创建和body同样宽度、高度的div,然后在其中添加透明图片,最后将div的zIndex设为最大,并添加到 body 的子节点序列中即可。

    展开全文
  • 浏览器插件开发在当前网页中嵌入插件页面 既然想嵌入插件页面就是需要写html和css 在myPlugin中创建contentCss文件夹,里面创建index.css文件 在manifest.json中引入 "content_scripts": [ { "matches": [...

    chrome浏览器插件开发-在当前网页中嵌入插件页面

    既然想嵌入插件页面就是需要写htmlcss

    1. myPlugin中创建contentCss文件夹,里面创建index.css文件
    2. manifest.json中引入
    "content_scripts": [
        {
            "matches": ["https://*.taobao.com/*"],
            "css": ["contentCss/index.css"],
            "js": ["contentJs/jquery.js", "contentJs/index.js"],
            "run_at": "document_idle"
        }
    ]
    

    css引入

    index.css内容

    #cj_move_page{
        width: 400px; 
        user-select: none; 
        background: white; 
        border: 1px solid; 
        height: 400px; 
        position: fixed; 
        right: 0; 
        bottom: 0; 
        z-index: 1000001;
    }
    #cj_move_h3{
        text-align: center; 
        line-height: 40px; 
        cursor: move;
    }
    

    contentJs/index.js文件内容

    console.log("this is index.js")
    console.log(document)
    console.log(location)
    
    //创建页面函数
    function createPage () {
        const page = $('<div id="cj_move_page"></div>')
        const h3 = $('<h3 id="cj_move_h3">my Plugin</h3>')
        page.append(h3)
        $('body').append(page)
        //拖拽
        drag(cj_move_h3)
    }
    createPage()
    
    //拖拽
    function drag(ele) {
        let oldX, oldY, newX, newY
        ele.onmousedown = function (e) {
            if (!cj_move_page.style.right && !cj_move_page.style.bottom) {
                cj_move_page.style.right = 0
                cj_move_page.style.bottom = 0
            }
            oldX = e.clientX
            oldY = e.clientY
            document.onmousemove = function (e) {
                newX = e.clientX
                newY = e.clientY
                cj_move_page.style.right = parseInt(cj_move_page.style.right) - newX + oldX + 'px'
                cj_move_page.style.bottom = parseInt(cj_move_page.style.bottom) - newY + oldY + 'px'
                oldX = newX
                oldY = newY
            }
            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
    

    js中创建页面,并加载到页面的body

    1. 刷新插件
    2. 刷新淘宝页面

    在这里插入图片描述

    此时就可以在content_scriptsmatches所匹配的页面里面插入你所写的dom元素了

    参考
    展开全文
  • Chrome浏览器插件开发心得

    千次阅读 2013-06-08 11:10:36
    从现在的经验来看,基本只需要看一下,360翻译的开发文档即可,开发出一个适合大部分人要求的插件了。 文档:http://open.chrome.360.cn/extension_dev/overview.html 二、实战经验 先给出我开发的XPlayer...
  • 一下是manifest.json文件的内容 { "name": "Name", "version": "0.0.0.1", "manifest_version": 2, "description": "Description", "browser_action": { "default_icon": "icon.png",
  • 其实我们也可以根据自己的需要来设计浏览器插件,从而满足自己的需要。下面小编就以Chrome插件(应用)开发为例,给大家简单的讲解一下具体的设计方法。 方法/步骤 首先,我们创建一个文件夹,...
  • 初探 利用 javascript 开发 Chrome 浏览器插件前言这几天运维组的小伙伴正在给新开发的一个商城录入一些数据。其中图片不是很好找,于是,在某个B2C网站下载图片。主要是要下载放大镜中的那几组图片。所有女生都大声...
  • 原文地址:...对于chrome忠实用户来说,了解和开发一款适合自己的chrome插件,确实是一件很cool的事情。了解chrome 插件chrome 插件个人理解: 就是一个html + js +css + image的一个w...
  • 介绍:Adblock Plus是Chrome浏览器中非常流行的一款广告拦截插件,Adblock Plus的用户多达数百万之多,在全球范围内都有很高的使用评价,Adblock Plus是由一个开源社区来维护。 TOP 2:Office Editing for Docs, ...
  • Chrome浏览器的vue开发插件,解决本地扩展程序中没有vue的情况,对前端页面进行高效调试
  • 开发了一个chrome浏览器插件,但是我想当用户打开一个网址后,进入网站, 插件就被下载自动安装到用户的浏览器上,请问这个过程自动安装怎么实现?过程是什么 原理?
  • chrome已经宣布新版本得chrome浏览器不在支持NPAPI,IE也被微软放弃,Edge浏览器除了部分企业版依旧支持ActiveX插件以外也不在支持ActiveX,webkit内核得浏览器对ACtiveX插件得支持并不完善,并且webkit内核对网页得...
  • 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    万次阅读 多人点赞 2020-02-15 15:27:05
    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠;但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具。那段时间,不少人开始推荐 Ch...
  • 谷歌(Chrome)浏览器插件开发教程

    千次阅读 2019-04-17 18:23:34
    通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。 开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多...
  • Chrome浏览器插件导出

    2020-04-20 15:54:58
    一些国内浏览器,不得不说下载插件确实麻烦,而且还不好用! 现将自己在Chrome插件的办法记录如下 1、进入路径 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions(若未手动...
  • 每次开发过程中多少会有JSON数据,这时候有一款不错的Chrome浏览器JSON插件就会方便很多。 今天推荐的插件叫JSON-Handle,下载地址见文末。 点击浏览器插件按钮后效果如下 格式化后的效果 1 选择某个节点左下角...
  • 其实chrome浏览器插件有很多,要说最好用的还是csdn官方开发插件,这款插件集各家之所长,基本满足日常所有开发任务,其中功能包括天气播报、网页收藏、翻译功能、二维码生成、json工具、ip查询、文档搜索、日期...
  • Chrome 浏览器插件之监控网页地址

    千次阅读 2018-10-18 11:19:34
    浏览器插件开发手册:http://open.chrome.360.cn/extension_dev/overview.html 浏览器插件demo,请先参考博客:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html 首先我们需要学习参考手册,了解...
  • Chrome浏览器插件(扩展)开发全攻略

    千次阅读 2020-06-07 19:00:43
    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面:...2.1.什么是Chrome插件 ...
  • 基于Chrome浏览器插件的爬虫系统 - 中国知网 基于Chrome浏览器插件的爬虫系统 - 中国知网 posted on 2017-06-27 17:17l...
  • 我为Chrome浏览器开发了一款插件,当我向朋友展示自己的插件时,受到他们的羡慕和称赞,那感觉酷极了!通过这次开发,我发现整个开发过程比较简单,有Javascript基础的朋友,都可以开发出属于自己的Chrome插件。  ...
  • Chrome浏览器插件之篡改HTTP的Head

    千次阅读 2018-11-01 14:34:38
    通过上一篇博客Chrome 浏览器插件之监控网页地址,我们队chrom浏览器插件已经有了一个基本了解了,那么下面我们将增加一个新需求?统计页面跳转源,也就是http 的Header里面的一个字段:Referer,如果请求包头不存在...
  • 通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。 开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,354
精华内容 20,141
关键字:

chrome浏览器插件开发