Chrome插件开发

来源：互联网发布：python 2 3区别编辑：程序博客网时间：2024/05/29 12:31

今天在看http://www.yu1u.org/3419.html这里的网页的时候发现，这里的文字图片不能直接复制，鼠标右键没有反应，经简单查看，可以发现限制这些功能的代码大致如下：

document.body.oncontextmenu=function(){return false;};document.body.ondragstart=function(){return false;};document.body.onselectstart=function(){return false;};document.body.onbeforecopy=function(){return false;};document.body.onselect=function(){document.selection.empty();};document.body.oncopy=function(){document.selection.empty();};

事实上，很多网站防止拷贝的方法之一就是类似的方法，306doc图书馆的文章也是如此：

其关键性的代码为：

        document.body.oncopy = function() {            var CurUserNameCookiescgcg = getCookie("LoginName");            if (CurUserNameCookiescgcg == "" || CurUserNameCookiescgcg == null) {                var docarttitle = document.getElementById("docarttitle");                var docencodetitle = "";                if (docarttitle == null) {                    docencodetitle = ""                } else {                    docencodetitle = "&titleencode=" + docarttitle.value                }                $.ajax({                    url: "http://www.360doc.com/ajax/GetLoginForm20130912.ashx?ArtID=" + ArticleID + "&type=2&arttype=" + CurArtType + docencodetitle,                    cache: false,                    success: function(result) {                        $("#LayerLogin").html(result);                        showBg("dialog", "dialog_content", "1")                    },                    error: onFailed                });                return false            } else {                var selhtml = "";                var selection;                if (window.getSelection) {                    selection = window.getSelection();                    if (selection != null) {                        selhtml = selection.toString()                    }                } else if (document.selection) {                    selection = document.selection.createRange();                    if (selection != null) {                        selhtml = selection.text                    }                }                if (selhtml.length > 200) {                    document.getElementById('fuzhitishidiv').style.display = 'none';                    if (getCookie("360doc1") != null && UserID != 0) {                        $.ajax({                            url: "http://www.360doc.com/ajax/GetLoginForm20130912.ashx?ArtID=" + ArticleID + "&type=5&arttype=" + CurArtType + "",                            cache: false,                            success: function(result) {                                if (result == "-1") {                                    return true                                } else {                                    if (document.getElementById("fuzhitishidiv") != null) {                                        document.getElementById("fuzhitishidiv").innerHTML = "<div style=\"position: absolute; z-index: 2001;\" ><img src=\"http://pubimage.360doc.com/wz/tuanceng.gif\" usemap=\"#Map2\" /><map name=\"Map2\" id=\"Map2\"><area shape=\"rect\" coords=\"288,23,307,42\" href=\"javascript:void(0);\" onclick=\"document.getElementById('fuzhitishidiv').innerHTML='';document.getElementById('fuzhitishidiv').style.display='none';\" /></map></div>";                                        window.scroll(0, 0);                                        document.getElementById("fuzhitishidiv").style.display = ''                                    } else {                                        alert("提示：点击标题下方的“转藏到我的图书馆”，将文章保存到您的个人图书馆中，然后可以拷贝文章的内容！")                                    }                                    return false                                }                            },                            error: onFailed                        })                    } else {                        if (document.getElementById("fuzhitishidiv") != null) {                            document.getElementById("fuzhitishidiv").innerHTML = "<div style=\"position: absolute; z-index: 2001;\" ><img src=\"http://pubimage.360doc.com/wz/tuanceng.gif\" usemap=\"#Map2\" /><map name=\"Map2\" id=\"Map2\"><area shape=\"rect\" coords=\"288,23,307,42\" href=\"javascript:void(0);\" onclick=\"document.getElementById('fuzhitishidiv').innerHTML='';document.getElementById('fuzhitishidiv').style.display='none';\" /></map></div>";                            window.scroll(0, 0);                            document.getElementById("fuzhitishidiv").style.display = ''                        } else {                            alert("提示：点击标题下方的“转藏到我的图书馆”，将文章保存到您的个人图书馆中，然后可以拷贝文章的内容！")                        }                        return false                    }                } else {                    return true                }            }        }

为了解决以上的这些问题，首先想到的思路是：

一、把这些代码或者外部js链接给去掉，但是这样做根本不现实：

对于第一种情况，使用浏览器的脚本屏蔽插件如ScriptBlock也到不到效果；
屏蔽所有JS可能使得网页根本就无法正常显示

二、禁用浏览器的Javascript的执行

同样由于以上的原理2，同样不能奏效；

三、开发Chrome插件+API HOOK实现

此方法看来是最有效的了；

插件制作流程：

Chrome地址栏输入：chrome://extensions/ 打开扩展程序窗口；勾选开发者选项；
选择之前制作好的插件的目录
在代码调试结束，确定发布之后，可以点击上图中的打包扩展程序进行打包；将生成的.crx文件拖进浏览器安装即可；

代码：

manifest.json

{"name": "UBC","manifest_version": 2,"version": "1.0.0","description": "UnBlock Copy","browser_action": {"default_icon": "icon.png","default_title": "UnBlock Copy",    "default_popup": "popup.html"},"content_scripts": [{           "matches": ["http://*/*","https://*/*"],            "js": ["js/hookapi.js"],            "run_at": "document_end",           "all_frames": true       }]}

注意：

"manifest_version": 2,

这一行固定，新的Chrome插件开发规范，网上的大多数教程没有此行。

popup.html

<div style="width:200px;"><center><img src="icon.png"/></center> <ol><li>Unblock Copy   Event</li><li>Unblock Paste  Event</li><li>Unblock Select Event</li></ol></div>

hookapi.js

//UnHook Copy Related Eventsvar arr_hook_event = ["oncontextmenu","ondragstart","onselectstart","onselect","onbeforecopy","oncopy"];function Array_indexOf(arr,item){for(var i = 0;i<arr.length;i++){  if(arr[i] == item){     return i;  }  }   return -1;  }   function UnHookEvent(onevent) {var _event = onevent.substr(2);document.addEventListener(_event, function(e) {e.stopPropagation();}, true);}for (var k in document.body) {if (/^on/.test(k)) {var __index = Array_indexOf(arr_hook_event,k);if(__index!= -1){UnHookEvent(k);}}}

测试效果，两个网站已经可以选择内容，并且可以复制：

最后一个问题：

安装的插件由于不是Google WebStore下载安装的，关闭浏览器下次打开之后，插件被Chrome自动禁用，解决办法：

1.每次手动删除再拖进去安装（麻烦！不可取！）

2.申请Google开发者认证，上传自己的插件到Google WebStore（不想用！要付接近40大洋！付费还很麻烦！）

3.为何不每次启动Chrome让它自动加载一次？

C:\Users\XXX>"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --load-extension=E:\Chrome插件开发\UBC\SRC

试了一试，果然可以！其中E:\Chrome插件开发\UBC\SRC是插件源码目录

再进一步，创建一个Chrome的快捷方式到桌面，修改：属性->目标:C:\Users\XXX>"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --load-extension=E:\Chrome插件开发\UBC\SRC

0 0