精华内容
下载资源
问答
  • chrome插件实现简单网页实时翻译

    千次阅读 2020-05-12 23:59:27
      该插件实现主要思路很简单,将content.js注入脚本进入浏览页面,利用window.getSelection()方法获取当前页面被鼠标选取的文字,之后利用chrome的api chrome.extension.sendRequest将之前获取的字符传给...

      昨天网上冲浪看了下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插件,向页面中注入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);
    
    
    展开全文
  • 然后发现Chrome Headless模式可以实现我想要的,而且用Chrome实现,可以排除掉很多Bug怀疑。Chrome Headless模式相当于一个没有界面的浏览器,能实现很多功能,能实现pdf打印,截图等,扩展下,...

    原来一直是用wkhtmltopdf来将网页打印成PDF文件,它是基于QtWebKit内核的。但最近有个很奇怪

    的字体问题困扰着我。所以找找其它能在Linux下实现相同功能的方法。然后发现Chrome Headless模式可

    以实现我想要的,而且用Chrome来实现,可以排除掉很多Bug怀疑。

    Chrome Headless模式相当于一个没有界面的浏览器,能实现很多功能,能实现pdf打印,截图等,扩展下,可以

    做web测试,爬虫抓取等等。

    CentOS 7下的安装:

    # vi /etc/yum.repos.d/chrome.repo

    [google-chrome]

    name=google-chrome

    baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch

    enabled=1

    gpgcheck=1

    gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

    # yum info google-chrome-stable

    # yum install -y google-chrome-stable

    # yum install -y mesa-libOSMesa mesa-libOSMesa-devel gnu-free-sans-fonts

    # yum install -y ipa-gothic-fonts ipa-pgothic-fonts准备一个网页:

    body {

    width: 910px;

    height: 1280px;

    font-family: Arial;

    background-image: url("http://www.xxx.com/UploadFiles/33/sss.png");

    }

    @page {

    size: A4;

    margin: 0;

    }

    @media print {

    body {-webkit-print-color-adjust: exact;}

    .no-print {display: none;}

    }

    test

    Arial:18px

    打印成PDF:

    google-chrome --headless --disable-gpu --print-to-pdf='cc5.pdf' http://127.0.0.1:8097/pdf

    google-chrome --headless --disable-gpu --screenshot --window-size=800,1000 http://127.0.0.1:8097/pdf

    "--print-to-pdf" 参数只是负责把网页转成PDF,如果想把网页打印成A4大小,并把背景图片显示出来,

    记得在css中加上下面两条:

    打印背景图片:

    -webkit-print-color-adjust: exact

    指定纸张大小:

    @page {size: A4;}

    参考链接:

    Getting Started with Headless Chrome

    展开全文
  • 1,安装Chrome插件Tampermonkey 1)点击 Chrome 的“菜单”-&gt;“更多工具”-&gt;“扩展程序” (2)在打开的“扩展程序”页面中,搜索“Tampermonkey”并安装即可,会有一个图标 2,实现大文件...

    为了下载matlab,我差点买了百度网盘的超级会员。。。,在广泛参考之下,总结出现在适用的设置方法(由于百度网盘的打击,方法只能说不断更新)

    1,安装Chrome插件Tampermonkey

    1)点击 Chrome 的“菜单”->“更多工具”->“扩展程序

    (2)在打开的“扩展程序”页面中,搜索“Tampermonkey”并安装即可,会有一个图标

    2,实现大文件直接下载

    (1)打开脚本网站:https://greasyfork.org/zh-CN

    (2)在搜索框输入“EX-百度云盘”。搜索并下载安装相关的脚本。(当然你也可以试试其他脚本,我试了一些其他的,但是都没有什么用)

    此时打开百度网盘网页版的时候就可以看到新的选项(没有的话可以刷新几次,我发表文章前后几天应该都是可以用的)

    这时候可以直接点普通下载了,可能速度会比较慢,但是也完成了第一个目标,不需要客户端直接下载,当然也可以用迅雷进行下载,复制链接就会跳出下载链接

    3.利用IDM(Internet Download Manager)

    当然你可以直接在官网搜试用版,破解版没有试过,应该也可以的,百度一下,应该资源很多

    https://www.internetdownloadmanager.com/(官网链接,很小的,一般都会默认在C盘,也不必要修改,修改之后可能会被防火墙拦截)

    打开之后界面如下(忽略我正在下载的matlab)

    可以在选项里配置关联的浏览器

    不必要太多操作,Chrome上会出现图标显示

    这个时候就可以直接点击百度网盘网页版,EX-云盘,普通下载,会直接运行IDM进行下载

    如你们所见,速度尽管不是很快,但是也远远超过普通的网盘了,所以还是很可观的,

    好的,希望对你们有用,

    我发现下载速度好像在缓慢提升,挺好的,

    展开全文
  • chrome插件

    2016-09-26 12:59:35
    当然也有些劣势,比如稍微占点内存,但是在如今这个硬件这么便宜的时代,这点几乎可以忽略,今天我就来给大家推荐下我自己常用的一些Chrome插件,你在别处可看不到,可以这么说,熟练使用这些插件,会对你
  • Chrome插件里怎么做 通过了解CORS原理,我们知道了不支持CORS的服务端会返回一个正常的HTTP回应,只是由于没有Aceess-control相关的响应头,导致浏览器对响应进行了拦截。利用chrome.webRequest API,对...
  •  手工登陆,然后采用chrome插件的方式进行收集。当然你会说用selenium等自动化测试的方法进行收集更cool,而且可以每天自动收集,完全的自动化不用人工参与。但是作为chrome的忠实脑残粉,再者只需要前端的js、...
  • CHROME插件

    千次阅读 2016-10-27 11:01:02
    chrom插件
  • 自定义chrome.devtools.network的Chrome插件

    千次阅读 2020-01-26 08:50:37
    文章目录本文要实现的内容chrome扩展(即插件)简介学习Chrome插件开发有什么意义为什么是Chrome插件而不是Firefox插件了解chrome插件什么是chrome插件扩展怎样开始chrome插件开发测试开始使用chrome插件功能打开...
  • 如何利用 Chrome 浏览器实现滚动截屏

    千次阅读 2018-07-18 20:30:00
    由于自适应网页设计(Responsive Web Design)的兴起,很多网站在手机浏览器的显示效果和电脑上是不一样的,利用 Chrome 的开发者工具,还可以实现对不同型号手机整个页面的截图: 进入需要截图的网站页面,打开...
  • ManiFest.json,他是实现一个插件的基础,没有你可能无法把东西塞到Chrome里。有了的他的话,你至少可以在Chrome里看到他。 background.js,全局的js设置。我不大懂js,看了教程以后,将它定义成配置插件作用域与...
  • 【干货】Chrome插件(扩展)开发全攻略

    万次阅读 2021-01-08 18:08:01
    **转载自 小茗同学 的 【干货】Chrome插件(扩展)开发全攻略 写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分...
  • 巧妙利用Chrome访客模式实现多用户登录
  • 非常实用的Chrome插件

    千次阅读 2016-11-28 15:38:15
    非常实用的Chrome插件
  • chrome插件推荐

    千次阅读 2017-07-13 10:48:19
    」,也是就随手把 Listen 1 推荐给大家,没想到瞬间被很多人点赞,现在已经破万赞了,看来我一直在使用的这个插件真的需求很大啊,它的使用场景是这样的:我想大部分人对听音乐是强需求吧?如果没有音乐,那么你的...
  • chrome 插件

    千次阅读 2013-10-25 18:22:42
    1. 如何复制多行字符串为一个变量 ... 这里的方案2不但可以用在ie也可以用在chrome,通过这个,非常方便实现了本地文件与网页的交互 Function.prototype.getMultiline = function() { var l
  • Chrome插件技术开发总结

    万次阅读 2011-09-29 18:06:55
    这也是一个总结贴,关于最近一个月来利用空余时间写的Chrome插件的方方面面。 12月初第一个周六上午在浏览豆瓣时心血来潮想写Chrome插件,在初略的读了下Chrome插件的开发文档的getting start tutorial以后,决定把...
  • 声明:该博客所有博文均为...(在谷歌浏览器中安装.crx扩展名的离线Chrome插件) 1. 将xxx.crx离线插件后缀修改为.zip,并解压到文件夹xxx。 2.参考图上标记(或打开浏览器,右上角三个点,找到更多工具——扩展程序进
  • 几款实用Chrome插件

    千次阅读 2013-09-30 09:37:30
    几款实用Chrome插件  时下很多人都用上了Google Chrome浏览器,这款目前世界上最快的浏览器既简洁又高效,用来上网冲浪还真是不错。特别是最为开发者,这是非常好的工具。不过好马也得配好鞍,和很多非IE核心...
  • 本文由伯乐在线-xianhu翻译,Daetalus校稿。...如果你之前从来没有写过Chrome插件,我建议你读一下这个。在这篇教程中,我们将教你如何使用Python代替JavaScript。 创建一个谷歌Chrome插件 首先...
  • 最新Chrome插件开发 api 解析

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

    2016-11-08 16:21:50
    今天我就来给大家推荐下我自己常用的一些Chrome插件,熟练使用这些插件,会对你的开发效率大大提高,逼格瞬间上升一个档次。1、Momentum装逼利器,教你如何优雅的使用Chrome,新打开一个Tab的时候再也不是一片空白,...
  • 想讨论chrome扩展和chrome插件区别这个话题很久了!但是迟迟没有写。因为我自己也没有搞清楚这两者之间的区别!回想当初是因为需要寻找番羽墙插件才想到去维护一个类似的插件网。 想讨论chrome扩展和chrome插件区别...
  • chrome插件-新闻推荐评测插件开发

    千次阅读 2014-02-23 18:02:14
    前期一般通过人工去评测,但是因为是根据网页来推荐的,为了满足随机性和提高效率,开发了基于chrome插件来对网页的推荐效果进行评测,前期主要是为了解决一些比较明显的问题,比如标题长度,乱码符号等,后期可以...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 无法像RTMPl流直接在网页直接播放,需要利用网页插件才能播放,大部分监控厂商都有提供一个插件,但是基本只兼容IE,在谷歌、火狐等知名浏览器上无法播放,下面内容整理了实现在火狐和以IE、google内核的浏览器(QQ...
  • 1.Chrome插件开发基础 开发Chrome插件很简单,只要会基本的前台技术HTML、CSS、JS就可以开发了。 Chrome插件一般包括两个HTML页面background和popup。 background页面只在启动浏览器加载插件时载入一次,...
  • 文章目录Never mind插件概述Nerver Mind插件功能Never Mind插件涉及技术Never Mind技术相关介绍1. chrome浏览器插件开发2. 基于Linux系统的图像识别服务器开发3. 验证码图像精确预处理4. 机器学习图像99%识别率算法5...
  • js关闭当前页面,chrome插件方式

    千次阅读 2018-12-25 09:13:43
    但是可以通过chrome插件实现这个目的。不过应用场景就仅限于安装了插件的浏览器。通常适合本地演示的时候使用。 示例源码下载: https://github.com/jdk137/learningChromeExtension/tree/master/src/w...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,010
精华内容 8,804
关键字:

利用chrome插件实现