Chrome扩展开发

近期因为网课的任务比较重，研究了一下Chrome扩展的语法，自己制作了一个可以一键看完的扩展。

1、网课现状

该网课页面对浏览器做了如下限制，

a.屏蔽了右键功能

b.网页失去焦点后自动暂停播放

c.网页最小化后自动暂停播放

d.视频播放不允许加速，每个视频必须看到接近结尾才标记为已观看，并拿到视频分

2、需求场景

a.首先解除失焦暂停、最小化暂停等影响边刷课边干其他事情的限制。

b.对已经掌握的视频可以直接设置“一键看完”

3.实现过程（chrome扩展语法请自行百度或者学习chrome官方文档）

a.首先需要定义一个mainfest.json文件，文件结构为：

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["activeTab", "declarativeContent", "storage","contextMenus"],
  "options_page": "options.html",
  "background": {
    "scripts": ["background.js"],//后台Script
    "persistent": false
  },
  "page_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": [//内容Script
    {
      "matches": ["https://www.baidu.com/*"],
      "js": ["contentScript.js"]
    }
  ],
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

最重要的文件是background.js,content-script.js,popup.html

分别表示后台代码文件，页面代码文件，弹出页面

后台代码文件会在整个浏览器生命周期运行,可以调用全部的chrome API,前提是要在manifest.json文件的permission节点中声明

页面代码在目标页面生命周期运行，与目标页面共享页面Dom，但是不能调用目标页面的js，只能调用很少一部分chrome API

弹出页面是用户点击扩展图标时弹出的页面，用来做一些用户交互，可以有自己配套的popup.js文件，但是popup.html文件中只能通过外联方式访问js文件，即只能通过<script src="xxx.js"></script>这种方式

b.解决网站对焦点和鼠标右键的限制

注意到content-script节点中定义了matches属性，该属性指定了content-script.js所要注入的目标页面

content-script.js虽然与目标页面共享Dom，但是js运行环境是相互隔离的，文档中说是Content scripts live in an isolated world，所以在content-script.js中定义的js函数并不会覆盖目标页面的同名函数

这里我们可以通过定义页面script元素的方式将需要运行的js语句通过string的方式挂到页面Dom中

类似于：

var myscript = document.createElement("Script")
myscript.text = "window.onblur() = null"
document.body.append(myscript)

网站的右键限制主要οnmοusedοwn事件，所以只需要将window.onmousedown=null注入到目标页面便可以搞定

同理，将window.onblur=null;window.outwindow=null;语句也注入进去，便可解决问题

c.一键看完功能的实现

此功能需要研究页面与服务器之间的通信协议，通过chrome开发者模式，network 监控XHR的调用过程，发展了视频是否看完的关键请求，然后在插件中模拟发送该请求便可以解决，此处按下不表

chrome扩展中发送网络请求的API只能在background.js中调用，此时需要一个信号来决定什么时候可以向服务器接口发模拟请求，这里我选用了右键菜单的形式

首先在background.js中调用chrome创建右键菜单的API在浏览器右键菜单中加一个菜单项，在该菜单的响应函数中调用模拟请求发送函数，完成一键看完功能。

Chrome扩展开发

原文：https://www.cnblogs.com/dyb888/p/13216590.html