精华内容
下载资源
问答
  • 利用chrome插件实现
    千次阅读
    2020-05-12 23:59:27

      昨天网上冲浪看了下chrome开发文档,写个翻译小插件练手,平时看外文文档查点生词还是挺方便的。

    简单介绍和实现效果

      该插件实现主要思路很简单,将content.js注入脚本进入浏览页面,利用window.getSelection()方法获取当前页面被鼠标选取的文字,之后利用chrome的api chrome.extension.sendRequest将之前获取的字符传给background,之后background中ajax调用翻译接口获取翻译结果后,利用chrome.storage.local存储后,在popup页面中进行显示。
    在这里插入图片描述

      为了方便直接使用popup进行结果的输出,也可以写一个悬浮框方便结果实时显示,将background中的结果传回content就行。

      效果展示在这里插入图片描述

      百度翻译响应还是很快的。

    content.js

      Content.js在插件中用来向当前页面注入脚本或者css样式。本文实现的插件选了对github以及其子链接有效,在插件manifest清单文件中写入content文件:

          "content_scripts": [
            {
              "matches": ["https://github.com/*"],
              "js": ["jquery.js", "md5.js", "content.js"]
            }
          ],
    

      为了演示下,这里设置只有在github相关页面中才执行脚本注入,同时指定注入的js文件。
    具体逻辑在content.js文件中实现:

    var now = "begin select"
    $(document).ready(function(){
        $("div").on("click", selectTrans)
    })
    
    function selectTrans(){
        var text = getSelect()
        var textStr = text.toString()
        // 防止因为div太多多次调用
        if(textStr != now && textStr!=""){
            console.log(text.toString())
            now = textStr
            sendRequestToPopup(textStr)
        }   
    }
    
    function getSelect(){
        var text = window.getSelection()
        if(text == null){
            return "blank"
        }
        return text
    }
    

      代码首先对所有的div块设置一个click的回调函数,这样无论页面上哪些文字被选中都能被获取到。
    在getSelect()函数中,利用window.getSelection()获取选中信息,要获取文本的话,需要调用其toString()方法,将字符串获取。为了防止div太多,点到别处时会获取空字符串或重复字符串,在selectTrans函数中进行判断,判断成功后传递信息。

    function sendRequestToPopup(textStr){
        chrome.extension.sendRequest({'text': textStr}, function(response){
            console.log(response); // 将返回信息打印到控制台里
        });
    }
    

      调用chrome.extension库中的sendRequest方法,将包含数据的对象传递出去,同时设置回调函数,将返回信息在控制台中输出。该方法可同时将request传递给popup和background,只要它们接收即可。

    background.js

      因为content security policy(CPS)安全性的规定,不能在https的页面中执行对于http的访问,所以利用content传递数据,在background中进行ajax的接口访问。
      Manifest中设置background的脚本文件,这边只需要进行后台数据处理,所以不用html文件:

          "background":{
            "scripts": ["jquery.js", "md5.js", "background.js"]
          },
    

      首先是利用onRequest监听传送过来的数据,处理完后存储到chrome的local中:

    chrome.extension.onRequest.addListener(
        function(request, sender, sendResponse) {
            textNow = request.text
            sendResponse("send success:" + textNow);
            console.log(textNow)
            trans(textNow)
            // afterTrans = textNow
            chrome.storage.local.set(
                {
                    former_result: textNow,
                    translate_result: afterTrans
                },function(){
                    console.log("store result:"+afterTrans)
                }
            )
        }
    )
    

      其中trans函数调用了ajax进行翻译信息获取,翻译接口使用的是百度翻译,返回一个对象信息,处理下获取翻译结果就行了。调用接口需要对应应用的id和key,开发者平台申请即可。

    function trans(text){
        // 调用百度翻译接口
        var query = text.toString()
        var from = "auto"
        var to = "zh"
        var appid = "xxx" //你的id
        var key = "xxx" //你的key
        var salt = (new Date).getTime()//取当前时间作为随机数
        var str1 = appid + query + salt + key
        var md5_str = MD5(str1)
        $.ajax({
            url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
            type: 'get',
            dataType: 'json',
            data:{
                appid: appid,
                q: query,
                from: from,
                to: to,
                salt: salt,
                sign: md5_str
            },
            success: function(result){
                console.log(result)
                var res = getTranslateResult(result)
                afterTrans = res
                console.log(res)
                // setResult(res)
            }
        })
    }
    

      MD5文件是百度翻译demo里面拿来的,直接用就行。

      需要注意的是,chrome插件不支持jsonp格式信息的获取,百度翻译示范中ajax的dataType是jsonp,这边修改为json。不然会违反csp规定,报错是:because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

    popup

      Popup属于browser action的组件,因为失去焦点就会关闭页面,所以选择下一个词之后会重新加载,这时候读取对应数据显示就行了。
    Manifest:

          "browser_action": {
            "default_icon": "images/t.png",
            "default_title": "translate tool",      
            "default_popup": "test.html"        
          },
    

      需要注意的是,chrome插件为了安全起见,不会调用popup页面中直接使用

    <link href="pop.css" type="text/css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="md5.js"></script>
    <script src="popup.js"></script>
    

      Popup.js:

    $(document).ready(function(){
        chrome.storage.local.get("translate_result",function(result){
            $("#translate_result").text(result['translate_result'])
            $(".main_screen")
        })
        chrome.storage.local.get("former_result",function(result){
            $("#former_result").text(result['former_result'])
        })
    })
    

      简单在加载完毕后显示对应值即可。

    总结

      看了下文档简单调用下接口熟悉了下插件,实现也比较简单,要继续做美化可以利用content的css注入来实现一个悬浮框。能注入脚本到当前页面还挺不错的,可以用来爬虫,修改页面样式等。不过因为csp的关系,很多时候要注意安全的写法,也确实需要注意安全,毕竟能直接注入脚本,不要用来历不明的插件哈。

    项目已传github:https://github.com/huiluczP/translate_plug_inlink

    更多相关内容
  •  手工登陆,然后采用chrome插件的方式进行收集。当然你会说用selenium等自动化测试的方法进行收集更cool,而且可以每天自动收集,完全的自动化不用人工参与。但是作为chrome的忠实脑残粉,再者只需要前端的js、...
     试想一下,如果每天要收集100页网页数据甚至更多。如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择。首先肯定会想到说用java、php、C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适从。还在为收集web端的数据感到苦恼吗?很高兴,你找对地方了。

      应用场景:

        1、需要每天大量重复收集web端的数据

        2、web页面数据需要登陆后才能采集

        3、web页面存在翻页

      解决方案:

        手工登陆,然后采用chrome插件的方式进行收集。当然你会说用selenium等自动化测试的方法进行收集更cool,而且可以每天自动收集,完全的自动化不用人工参与。但是作为chrome的忠实脑残粉,再者只需要前端的js、服务器端的接收文件、数据库就可以完美解决这一问题。再加上部署和操作简单。 脑残粉总有很多理由的嘛。好吧,就算是一种憋屈的曲线救国和实现方式吧。

      思路: 091407449546598.jpg
    帮助手册:http://open.chrome.360.cn/extension_dev/overview.html

    实例: 091528407985044.png
    抓取某电商后台订单数据

    1、创建一个项目文件夹并引入所需文件:如D:\tool\chrome_server_plugin

      jquery-2.1.1.min.js、icon.png

    2、创建background.html

    <html><head>
    </head></html>
    3、创建配置文件manifest.json文件

    复制代码
    {

    "name": "获取某电商后台订单信息",
    "version": "1.0",
    "manifest_version": 2,
    "description": "*********获取某电商后台订单信息*********",
    "browser_action": {
    "default_icon": "icon.png"
    },
    "permissions": [
    "webNavigation",
    "tabs",
    "contextMenus",
    "http://服务器接受数据url/"
    ],
    "background": {
    "scripts": ["eventPage.js","jquery-2.1.1.min.js"]
    },
    "content_scripts": [
    {
    "matches": ["http://抓取页面url/*"],
    "js": ["jquery-2.1.1.min.js", "contentscript.js"]
    }
    ]
    }
    复制代码
    4、创建前端js文件contentscript.js

    复制代码
    var totalPage;
    var page = 0;
    //注册前台页面监听事件
    chrome.extension.onMessage.addListener(
      function(request, sender, sendResponse) {
        totalPage = $("input[name=totalPage]").val();
        console.log("totalPage----------" + totalPage);
        //console.log("msg----------contentscript.js" + request.greeting);
        getOrderInfo( sendResponse );
      });

    //获取订单信息
    function getOrderInfo( sendResponse ){
      var flag = false;

      payMoney = [];//货款金额
      orderTime = [];//下单时间
      $("tr[class=head] span").each(function(index){
        spantxt = '';
        spantxt = $(this).text();
        if(spantxt.indexOf('货款金额:') > -1){
          money = spantxt.substr(5);
          //console.log(index + "---------payMoney-------货款金额:" + money);
          payMoney.push(money);
        }else if(spantxt.indexOf('下单时间:') > -1){
          time = spantxt.substr(5);
          //console.log(index + "---------orderTime-------下单时间:" + time);
          orderTime.push(time);
        }
      });

    paytype = [];//物流方式
    yunfei = [];//运费
    $("td[class=p-values]").each(function(index){
      tdtxt = '';
      tdtxt = $(this).text();
      if(tdtxt.indexOf('货到付款') > -1){
        paytype.push('货到付款');
      }else{
        paytype.push('在线支付');
      }

      yf_index = tdtxt.indexOf('运费:');
      if(yf_index > -1){
        temp = tdtxt.substr(yf_index);
        temp_yf = temp.substr(3);
        //console.log(index + "---------yunfei-------"+ temp +"===" + temp_yf);
        yunfei.push(temp_yf);
      }else{
        yunfei.push(0);
      }

      //console.log(index + "---------tdtxt-------" + tdtxt);
    });

    orderStatus = [];//订单状态
    users = [];//买家账号
    remark = [];//备注
    $("tr[class=content] td[class=t-c]").each(function(index){
      tdtxt = '';
      tdtxt = $(this).text().replace(/[\r\n]\ +/g,"");//将回车,换行,空格去掉
      temp = index % 5;
      if(1 == temp){
        orderStatus.push(tdtxt);
        //console.log(index + "---------statu-------" + tdtxt);
      }else if(2 == temp){
        users.push(tdtxt);
        //console.log(index + "---------users-------" + tdtxt);
      }else if(3 == temp){
        remark.push(tdtxt);
        //console.log(index + "---------remark-------" + tdtxt);
      }
    });

    express = [];//快递单号
    $("tr[class=content] td div[style='text-align: center;']").each(function(index){
      tdtxt = '';
      tdtxt = $(this).text().replace(/[\r\n]\ +/g,"");//将回车,换行,空格去掉
      express.push(tdtxt);
      //console.log( "============快递单号=======" + tdtxt);
    });

    orderInfo = [];
    splitstr = "@_@";
    $("tr[class=head] a[track=orderinfopagebeta]").each(function(index){
      orderid = $(this).text();
      //console.log("---------orderid-------" + orderid);
      mycomment = $("a[id=comment_" + orderid + "]").attr('style').replace(/[\r\n]\ +/g,"");
      if("display: block;" == mycomment){
        mycomment = '已评价';
      }else if('display:none;' == mycomment){
        mycomment = '未评价';
      }

      tempshopid = $("img[id=remarkFlag_" + orderid + "]").attr('onclick');
      shopidIndex = tempshopid.indexOf(",");
      shopid = tempshopid.substr(shopidIndex + 1).replace(/[\)\;]/g,"");
      //console.log("---------shopid-------" + shopid);
      orderdesc = shopid + splitstr + orderid + splitstr + mycomment + splitstr + payMoney[index] + splitstr + orderTime[index] + splitstr + paytype[index] + splitstr + yunfei[index] + splitstr + orderStatus[index] + splitstr + users[index] + splitstr + remark[index] + splitstr + express[index];
      console.log("---------orderdesc-------" + orderdesc);
      orderInfo.push(orderdesc);
    });

    //chrome.extension.sendMessage({"orderInfo": orderInfo}, function(response) {});
    page = parseInt($("a[class=current]").text());
    totalPage = parseInt($("input[name=totalPage]").val());
    console.log(page + "--page-----------totalPage---" + totalPage);
    if(page < totalPage && page < 100){
      console.log("---------next-------");
      sendMsg( orderInfo, "next" );
      $('a.next')[1].click();
    }else{
      console.log("---------end-------");
      sendMsg( orderInfo, "end" );
    }
    //

    }

    //将获取内容传递给后台文件进行处理
    function sendMsg( msg, cmd){
      chrome.extension.sendMessage({"msg": msg, "cmd": cmd}, function(response) {});
    }
    复制代码
    5、创建后台处理js文件eventPage.js

    复制代码
    var flag = false;
    var currentTabId;
    chrome.browserAction.onClicked.addListener(function(tab) {
      counter = 40;
      console.log('Turning ' + tab.url);
      flag = true;
      currentTabId = tab.id;
      chrome.tabs.getSelected(null, function(tab) {
        sendMsg(tab.id);
      });
    });


    chrome.webNavigation.onCompleted.addListener(function( tab ){
      console.log('加载完成***' + tab.tabId );
      if( flag ){
        sendMsg( tab.tabId );
      }
    });

    chrome.extension.onMessage.addListener(

    function(request, sender, sendResponse) {
      console.log("*******evenPage.js***chrome.extension.onMessage.addListener"); 
      articleData = request;
      $.ajax({
        url: "服务器接受数据URL/getOrderinfo.php",
        cache: false,
        type: "POST",
        data: {'orderinfo': request.msg.join("#$#")},
        dataType: "json"
        }).done(function(msg) {
          console.log('*******************json*************' + msg.sql );
          chrome.tabs.sendMessage(currentTabId, {"cmd":"end"}, 
          function(response) { 
          console.log(response); 
     });

    }).fail(function(jqXHR, textStatus) {
      articleData.firstAccess = textStatus;
    });

    cmd = request.cmd;
    if('end' == cmd){
      flag = false;//确保不会自动运行
    }

    });

    function sendSku2Info(colores){
      chrome.tabs.query(
        {active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {"cmd":"ok", "sku": colores}, 
          function(response) { 
            console.log(response); 
          });

      });
    }

    function sendMsg( tabid ){
      console.log(tabid + "--sendMsg()----eventPage.js");
      chrome.tabs.sendMessage(tabid, {greeting: "start working"}, function(response) {
      });
    }
    复制代码
     

    4、创建服务器接收文件getOrderInfo.php(放在服务器哦,亲!)

    复制代码
    <?php

    header("Content-type:text/html; charset=utf-8");
    //include("./includes/global.php");
    echo "***********************";
    $con = mysql_connect("localhost","root","root");
    echo "==============";
    if (!$con)
    {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("test", $con);
    //var_dump($_REQUEST);
    $orderinfo = $_POST['orderinfo'];
    $orderArr = explode('#$#', $orderinfo);
    print_r($orderArr);
    $sql_value = array();
    $split = "', '";
    foreach($orderArr as $myorder){
      $value = explode('@_@', $myorder);
      echo "===========" . $value[10] ."</br>";
      $sql = "INSERT INTO test(venderId, orderid, pingjia, money, ordertime, paytype, yunfei, orderstatu, user, remark, express) VALUES ";
      $sql .= "('" . $value[0] . $split . $value[1] . $split . $value[2] . $split . $value[3] . $split . $value[4] . $split . $value[5] . $split . $value[6] . $split .     $value[7] . $split . $value[8] . $split . $value[9] . $split . $value[10] . "') ON DUPLICATE KEY UPDATE remark = '" . $value[9] . "', pingjia = '" .     $value[2] . "', orderstatu = '" . $value[7] . "', express = '" . $value[10] . "'";
      mysql_query($sql);
    }
    mysql_close($con);

    ?>
    复制代码
    5、创建数据库表

    复制代码
    CREATE TABLE `test` (
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
    `venderId` int(10) NOT NULL DEFAULT '0' COMMENT '商家ID',
    `orderid` bigint(20) NOT NULL DEFAULT '0' COMMENT '订单ID',
    `pingjia` varchar(100) NOT NULL DEFAULT '' COMMENT '订单发出后的状态(是否评价)',
    `money` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '订单金额',
    `ordertime` varchar(100) NOT NULL DEFAULT '' COMMENT '下单时间',
    `paytype` varchar(100) NOT NULL DEFAULT '' COMMENT '付款方式',
    `yunfei` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '运费',
    `orderstatu` varchar(100) NOT NULL DEFAULT '' COMMENT '订单状态',
    `user` varchar(255) NOT NULL DEFAULT '' COMMENT '订单用户',
    `remark` varchar(255) NOT NULL DEFAULT '' COMMENT '备注',
    `express` varchar(255) NOT NULL DEFAULT '' COMMENT '物流方式和运单号',
    `shop_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '店铺表ID',
    `shop_name` varchar(255) NOT NULL DEFAULT '' COMMENT '店铺名称',
    `stattime` int(11) NOT NULL DEFAULT '0' COMMENT '下单年月日',
    PRIMARY KEY (`id`),
    UNIQUE KEY `orderid` (`orderid`)
    ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT=''
    复制代码
    注意:各文件中红色部分需要手工修改,此外如果修改js文件名,请在manifest.json中修改相应的配置信息即可。

    插件加载步骤: 091549579387436.jpg示例代码:https://github.com/jackgitgz/chrome_server_plugin

    此示例仅供参考,有理解不到位或错误的还请指出。





    本文转自秋楓博客园博客,原文链接:http://www.cnblogs.com/rwxwsblog/p/4490530.html,如需转载请自行联系原作者
    展开全文
  • Automa它定位是一款 Chrome 插件,也就意味着,它的使用载体需要借助Chrome浏览器。利用Automa,即使你不会写代码,也能按照自己的需求,完成一系列自动化操作。利用它,你可以将一些重复性的任务实现自动化、并且它...
  • 对于chrome忠实用户来说,了解和开发一款适合自己的chrome插件,确实是一件很cool的事情。了解chrome 插件chrome 插件个人理解:就是一个html + js +css + image的一个web应用;不同于普通的web应用,chrome插件除了...

    chrome 之所以越来越好用,很大一部分原因归功于功能丰富的插件;对于chrome忠实用户来说,了解和开发一款适合自己的chrome插件,确实是一件很cool的事情。

    了解chrome 插件

    chrome 插件个人理解:就是一个html + js +css + image的一个web应用;不同于普通的web应用,chrome插件除了兼容普通的js,json,h5等api,还可以调用一些浏览器级别的api,例如收藏夹,历史记录等。

    开始写第一个插件

    文件结构

    一个简单的demo,文件目录如下

    49c215fe323dcf4a62bdbe746707ee02.png

    和普通的web文件没有什么区别,简单介绍下

    html:存放html页面

    js :存放js

    locales :存放了一个多语言的兼容【可无】

    image :放了两张图片【初期图标】

    manifest :核心入口文件

    写一个manifest

    直接上代码:

    {

    "name": "hijack analyse plug",

    "version": "0.0.1",

    "manifest_version": 2,

    // 简单描述

    "description": "chrome plug analyse and guard the http hijack",

    "icons": {

    "16": "image/icon16.png",

    "48": "image/icon48.png"

    },

    // 选择默认语言

    "default_locale": "en",

    // 浏览器小图表部分

    "browser_action": {

    "default_title": "反劫持",

    "default_icon": "image/icon16.png",

    "default_popup": "html/test.html"

    },

    // 引入一个脚本

    "content_scripts": [

    {

    "js": ["script/test.js"],

    // 在什么情况下使用该脚本

    "matches": [

    "http://*/*",

    "https://*/*"

    ],

    // 什么情况下运行【文档加载开始】

    "run_at": "document_start"

    }

    ],

    // 应用协议页面

    "permissions": [

    "http://*/*",

    "https://*/*"

    ]

    }

    test.js 文件

    /**

    * @author: cuixiaohuan

    * Date: 16/4/13

    * Time: 下午8:41

    */

    (function(){

    /**

    * just test for run by self

    */

    console.log('begin');

    })();

    test.html 文件

    just for test

    test

    运行插件

    chrome 中输入:chrome://extensions

    选择加载已解压的插件-》选择文件根目录即可。

    效果如下:

    b1b7ac8092a7a224114360b756ddb7bb.png

    一个基本的插件变完成了,勾选已启用,随便打开一个网页,会看到log中输出如下

    8f3cb298df0944dc4aa7fab73b0fca62.png

    点击页面上面的小图标如下图:

    e951ebe0c2951c26a3b9eaba658eacfa.png

    优化建议

    一个小的插件已经完成,但是还有更多的api和有趣的事情可以去做。下面是360文档中给出一些优化建议,共勉。

    确认 Browser actions 只使用在大多数网站都有功能需求的场景下。确认 Browser actions 没有使用在少数网页才有功能的场景, 此场景请使用page actions。

    确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。

    尽量使用alpha通道并且柔滑你的图标边缘,因为很多用户使用themes,你的图标应该在在各种背景下都表现不错。不要不停的闪动你的图标,这很惹人反感。

    展开全文
  • 利用chrome插件,向页面中注入js脚本

    万次阅读 2020-07-31 15:08:03
    我就去百度了一下怎么向网站注入外部脚本,发现用chrome插件技术可以实现,然后去chrome官网过了一下文档,不想看英文的可以去看360极速浏览器的插件文档 chrome插件入门 导入插件 实现了下载 示例代码 manifest....

    缘由

    我的电脑插入耳机后外音不会自动关闭,然后在realtek高清晰音频管理器里面设置还是没有用,然后我就想到大概是最近win10经常更新,然后这个管理器版本不对导致的,于是就去realtek官网打算下载个最新的,然后。。。点go按钮没反应,习惯性的f12看一下,发现控制台报错
    在这里插入图片描述
    jQuery的问题,然后我到Network里看了一下,发现cdn的方式引入jquery加载失败https://code.jquery.com/jquery-1.12.4.min.js
    在这里插入图片描述
    那么真相只有一个,jQuery引入失败,我就去百度了一下怎么向网站注入外部脚本,发现用chrome插件技术可以实现,然后去chrome官网过了一下文档,不想看英文的可以去看360极速浏览器的插件文档

    chrome插件入门

    在这里插入图片描述
    导入插件
    在这里插入图片描述

    实现了下载

    在这里插入图片描述

    示例代码

    manifest.json

    {
      "name": "插件demo",
      "version": "1.0",
      "description": "入门学习用",
        "permissions": ["activeTab","declarativeContent","storage"],
        "background": {
            "scripts": ["background.js"],
            "persistent": false
          },
        "browser_action": {
          "default_popup": "popup.html",
           "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
          }
        },
          "content_scripts": [
        {"js":["content_scripts.js"],"matches":["<all_urls>"]}
      ],
          "icons": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        },
        "options_page": "options.html",
       
      "manifest_version": 2
    }
    
    

    content_scripts.js

    const theScript = document.createElement('script');
    theScript.src = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js';
    document.body.appendChild(theScript);
    
    console.log('查看脚本是否注入成功')
    

    background.js

    'use strict';
    
    chrome.runtime.onInstalled.addListener(function() {
      chrome.storage.sync.set({color: 'pink'}, function() {
        console.log("color,pink");
      });
        chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
          chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({
              pageUrl: {hostEquals: 'developer.chrome.com'},
            })
            ],
                actions: [new chrome.declarativeContent.ShowPageAction()]
          }]);
        });
    });
    
    

    popup.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
          <style>
            .box{
              width: 200px;
              height: 400px;
            }
            button {
              height: 30px;
              width: 30px;
              outline: none;
            }
          </style>
        </head>
        <body>
          <div class="box">
            <h3>点击可以改变背景色和文字颜色</h3>
          <button id="changeColor"></button>
            
          </div>
            <script src="popup.js"></script>
        </body>
    
    </html>
    

    popup.js

    'use strict';
    
    let changeColor = document.getElementById('changeColor');
    chrome.storage.sync.get('color', function(data) {
      changeColor.style.backgroundColor = data.color;
      changeColor.setAttribute('value', data.color);
    });
    
     changeColor.onclick = function(element) {
        let color = element.target.value;
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.executeScript(
              tabs[0].id,
              {code: 'document.body.style.backgroundColor = "' + color + '";'});
        });
      };
    

    options.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
          <style>
            .box{
              width: 200px;
              height: 400px;
            }
            button {
              height: 30px;
              width: 30px;
              outline: none;
            }
          </style>
        </head>
        <body>
          <div class="box">
            <h3>点击可以改变背景色和文字颜色</h3>
          <button id="changeColor"></button>
            
          </div>
            <script src="popup.js"></script>
        </body>
    
    </html>
    

    options.js

    // 'use strict';
    
    // const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
    
    // function constructOptions(kButtonColors) {
    //   for (let item of kButtonColors) {
    //     let button = document.createElement('button');
    //     button.style.backgroundColor = item;
    //     button.addEventListener('click', function() {
    //       chrome.storage.sync.set({color: item}, function() {
    //         console.log('color is ' + item);
    //       })
    //     });
    //     page.appendChild(button);
    //   }
    // }
    // constructOptions(kButtonColors);
    
    
    展开全文
  • , // 扩展图标。推荐大小16,48,128 "icons": { "16": "image/icon-16.png
  • 插件主要是为了配合牛赞网站(http://newzan.com)和牛赞移动端(现已有iPhone版和Android版),让用户实现无缝阅读和分享。利用插件,你可以方便地将正在浏览的网页收藏到牛赞以便稍后阅读。牛赞将为你提取网页...
  • 一、前言提起Chrome扩展插件(Chrome Extension),每个人的浏览器中或多或少都安装了几个插件,像一键翻译、广告屏蔽、录屏等等,通过使用这些插件,可以有效的提高我们的工作效...
  • 前言一个 Chrome 插件,核心就是 manifest.json 文件,manifest.json 下的属性content_scripts 指定inject的脚本列表 js,css    【 injected】browser_action 中 default_popup指定popup...
  • Chrome 插件开发

    千次阅读 2020-04-06 09:31:30
    Chrome 插件开发 参考 官方文档:https://developer.chrome.com/extensions 中文文档(360浏览器):http://open.chrome.360.cn/extension_dev/overview.html websocket 小示例:...
  • 如何调试 chrome插件

    千次阅读 2021-12-29 21:27:13
    chrome插件结构大致是分为三种类型,依次为content_script.js类型,background.js类型和poup.js类型。插件很多时候仅仅需要一种类型就可以解决问题。插件的存在顺序依次是content_script.js>background.js>...
  • 使用Python开发chrome插件

    千次阅读 2021-01-26 20:08:00
    如果你之前从来没有写过Chrome插件,我建议你读一下这个。在这篇教程中,我们将教你如何使用Python代替JavaScript。创建一个谷歌Chrome插件首先,我们必须创建一个清单文件:manifest.json。然后创建一个名为popup....
  • ManiFest.json,他是实现一个插件的基础,没有你可能无法把东西塞到Chrome里。有了的他的话,你至少可以在Chrome里看到他。 background.js,全局的js设置。我不大懂js,看了教程以后,将它定义成配置插件作用域与...
  • 示例插件示例应用示例插件安装打开开发者模式添加本地插件包安装后的效果插件开发插件介绍目录结构manifest.jsonindex.htmladdToken.jsgetToken1.js 作为一名测试汪,经常需要对同类型的接口进行,而这些接口都需要...
  • 自定义chrome.devtools.network的Chrome插件

    千次阅读 2020-01-26 08:50:37
    文章目录本文要实现的内容chrome扩展(即插件)简介学习Chrome插件开发有什么意义为什么是Chrome插件而不是Firefox插件了解chrome插件什么是chrome插件扩展怎样开始chrome插件开发测试开始使用chrome插件功能打开...
  • 大家好,我是TJ一个励志推荐10000款开源项目与工具的程序员今天TJ君给大家介绍一个实用的CHROME插件:开源中国 Chrome 插件利用这个插件,可以实现直接在chrome每次打开的...
  • 最新Chrome插件开发 api 解析

    万次阅读 多人点赞 2019-05-05 11:38:44
    我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,所以转载务必保留 http://blog.liuxianan.com/chrome-plugin-develop.html 。本文所有涉及到的大部分代码均在这个demo里面:...
  • 【干货】Chrome插件(扩展)开发全攻略

    千次阅读 2021-12-08 01:31:19
    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍作者:小茗同学https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#!comments...
  • Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板
  • 我们可以像CSDN官方的Chrome插件一样,将起始页改写成Chrome插件,这样避免了没有域名也能使用的尴尬境地....
  • 作者:小茗同学https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#!comments一、写在前面我花了将近一个多月...
  • 实用的chrome插件

    千次阅读 2020-10-08 09:40:04
    最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。 链接:https://dwz.cn/yP2VWDRK 2. WEB 前端助手 前端神器,包括 JSON 格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取...
  • 免费好用的网页标记插件 | pagenote
  • chrome扩展实现获取网页数据的功能

    万次阅读 2015-10-04 09:35:51
    换个思路,既然后端请求有权限验证问题,那就让请求直接在浏览器发起,自动化测试工具及chrome扩展都可以发起浏览器请求,网上搜了下 chrome扩展,本以为很难,看了下 chrome已定义好框架,往里面塞内容即可,如果不涉及高级...
  • chrome插件-Web开发者助手 FeHelper

    千次阅读 2022-04-12 10:45:30
    FeHelper是一个非常好用的插件,支持Chrome、Firefox、MS-Edge浏览器,工具集包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,765
精华内容 9,906
关键字:

利用chrome插件实现