开发油猴脚本:给任意网页的选中文字涂色

概述

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

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

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

演示

脚本代码

首先,需要在浏览器上面安装油猴(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>');
            }
    };
})();

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

网页效果演示

使用方法:用鼠标选中文字,那么选中的文字会自动涂成黄色

<script> 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, ‘‘+txt+‘‘); } };</script>

原文地址:https://www.cnblogs.com/yangzhou33/p/8435805.html

时间: 2024-10-27 06:14:07

开发油猴脚本:给任意网页的选中文字涂色的相关文章

[Chrome] 谷歌浏览器开启开发模式仍然无法安装油猴脚本

右键 > 属性 > 起始位置 > 添加 --enable-easy-off-store-extension-install 谷歌浏览器无法安装油猴脚本:--enable-easy-off-store-extension-install 原文地址:https://www.cnblogs.com/x-you/p/10624928.html

简单的油猴脚本入门教程

简单的油猴脚本入门教程 当然, 最好有一些js基础 对于浏览器的使用, 基本上操作都是一样的, 既然是前端功能, 这里推荐火狐浏览器 1.下载油猴脚本 百度上有很多教程, 这里就不详细说明了 https://tampermonkey.net/入油猴脚本官网, 会自动为你找到适配的油猴版本(如果没有对应的浏览器的话,推荐安装Firefox或者Chrome) 两个版本对新手来说应该是一样的,我选择稳定版(不含beta的版本) 浏览器添加脚本的方式也基本相同, 这里只看Firefox的吧 点击+Add

[转帖]油猴脚本管理器 Tampermonkey v4.8 离线CRX安装包(谷歌浏览器版)

https://www.52pojie.cn/thread-1010604-1-1.html 油猴脚本管理器 Tampermonkey v4.8 离线CRX安装包(谷歌浏览器版) 链接:https://pan.baidu.com/s/1xklgylKgYo9t1cjr80-mLw 提取码:a8pr 复制这段内容后打开百度网盘手机App,操作更方便哦 安装方法: 附有出现安装错误(程序包无效”CRX_HEADER_INVALID”)的解决方法: 对于老版本的chrome浏览器,可以直接拖动安装:

Tampermonkey油猴脚本管理插件-最强浏览器插件的安装使用全攻略

对于接触过谷歌浏览器插件的“玩家”们来说,应该没有人没听说过Tampermonkey用户脚本管理器,也就是中文所说的“油猴”这个chrome插件了. 油猴号称全商店最强的浏览器插件绝非浪得虚名,一个油猴脚本管理器可以代替数十个浏览器插件,有“浏览器黑科技”之称. 近期我们发现,一些刚刚踏足这个领域的朋友们对此都感到非常迷惑——油猴到底是什么东西,怎么安装,怎么用? 今天,我们就来给大家详细地介绍一下Tampermonkey油猴的使用安装全过程. 一.功能介绍 Tampermonkey脚本管理器,

[Windows] 【油猴脚本】慕课网视频下载链接解析工具

http://www.52pojie.cn/forum.php?mod=viewthread&tid=592829&fromguid=hot 好久没出来发帖了 点进来的都知道这个是干嘛的 话不多说,上图上工具 下面是测试图 可能有些教程解析不出来 ,大家多包涵 目前能用  但不知道什么时候会和谐 和谐了我也会关注作者的更新 争取第一时间转载 我搜了下论坛应该没有这个  不知道是不是论坛大神写的 如果是,大家多包涵 如果不是,大家CB热心鼓励 油猴脚本安装教程我原来帖子里有 http://w

油猴脚本:百度网盘搜索引擎聚合

首先安装油猴脚本chrome:[油猴脚本插件].chrome或者浏览器也可以去[油猴脚本官网]下载. 装好以后点击添加新脚本:将下面的代码复制进来,然后点[文件]-[保存],即可使用该脚本代码首先在guihub上的分享,在这里我也直接贴出代码: // ==UserScript== // @name 百度网盘搜索引擎聚合 // @version 1.0 // @description 在百度云盘页面中新增百度网盘搜索引擎聚合 // @match *://pan.baidu.com/* // @gr

油猴脚本编写

今天误点了好几次百度百科上的广告,于是在油猴上写了个小脚本屏蔽侧边栏广告.代码是原生JS写的,写完之后才知道可以通过引用JQ的文件来使用JQ语法. 油猴脚本地址 引用JQ文件需要在脚本开头使用 // @require https://code.jquery.com/jquery-2.1.4.min.js 原文地址:https://www.cnblogs.com/ZoraZora59/p/11083483.html

油猴脚本使用

Chrome浏览器安装油猴插件时出现程序包无效的问题 解决办法: 1. Chrome浏览器——右上角三点——更多工具——扩展程序——打开开发者模式 2. 把下载好的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 3. 使用解压软件解压该压缩文件 4. Chrome浏览器扩展程序页面——加载已解压的扩展程序——选择上一步解压缩的文件夹 5. 安装成功 油猴脚本下载网址 https://greasyfork.org/zh-CN/scripts 原文地址:https://ww

油猴脚本:去除百度首页广告卡片推荐和二维码

问题描述: 最近打开百度首页,突然发现有了广告卡片推荐,如下情况所示: 解决方案: 想要屏蔽显示的这个,不想被强制推广 想到可以写个简单的油猴脚本,由于js只是会一点点,所以代码也比较low,不过可以达到自己想要的效果 代码: // ==UserScript== // @name 隐藏百度首页的卡片 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world!