zoukankan      html  css  js  c++  java
  • 开发油猴脚本:给任意网页的选中文字涂色

    概述

    简单来说:就像在现实课本上用mark笔涂色划重点一样,可以用这个脚本在任意网页上涂色划重点。

    开发缘由:每次在网上看资料的时候,都会默默归纳几个重要的地方,但是看完资料写博客的时候又容易忘重点,所以我开发了这款脚本。

    脚本缺陷:(1)不能刷新网页,否则标记就没了。(2)只能标记同一种文字,不能超链接,文本,引用,强调一起标记,但是可以分开标记。

    演示

    webmark图片演示

    脚本代码

    首先,需要在浏览器上面安装油猴(Tampermonkey)插件。360浏览器可在扩展中心找到。其它浏览器的安装方法请自行百度。

    最后,打开油猴->添加新脚本,把代码复制进去即可

    // ==UserScript==
    // @name         Mark on Web
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try to take over the world!
    // @author       You
    // @match        https://developer.mozilla.org/*
    // @match        http://*/*
    // @match        https://*/*
    // @grant        none
    // @copyright  2018+, yang-zhou
    // ==/UserScript==
    
    (function() {
        'use strict';
    
        var funcGetSelectText = function(){
            var txt = '';
            if(document.selection){
                txt = document.selection.createRange().text;//ie
            }else{
                txt = document.getSelection();
            }
            return txt.toString();
            };
        var container = container || document;
        container.onmouseup = function(){
            var txt = funcGetSelectText();
            if(txt)
                {
                    event.target.innerHTML =event.target.innerHTML.replace(txt, '<span style="background-color:yellow">'+txt+'</span>');
                }
        };
    })();
    

    注意:请确保打开网页的时候开启了油猴插件,并且启用了我编写的脚本。

    网页效果演示

  • 相关阅读:
    miniconda安装和使用
    linux下git push出现“更新被拒绝,因为远程仓库包含您本地尚不存在的提交。”问题的处理
    win8、win10系统添加组策略的方法
    Unable to guess the mime type as no guessers are available (Did you enable the php_fileinfo extension?)
    thinkphp5 连接SQLserver
    thinkphp5 上传图片压缩
    在Vue中使用了Swiper ,从后台获取动态数据后,swiper滑动失效
    微信小程序多图上传及后台处理(后台用thinkphp3.2)
    PHP 数组下标从0开始
    微信小程序去除左上角返回的按钮
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8435805.html
Copyright © 2011-2022 走看看