网站后台怎么转发网页内容(Chrome要求插件的核心介绍(图)扩展和核心)

　　网站后台怎么转发网页内容(Chrome要求插件的核心介绍(图)扩展和核心)

　　一、基本介绍

　　chrome扩展也称为chrome插件，是一种利用web技术开发的增强浏览器功能的软件。它实际上是一个以.crx为后缀的压缩包，由HTML、CSS、JS、图片等资源组成。

　　chrome插件没有严格的项目结构要求，只需要根目录下有一个manifest.json文件。

　　从右上角菜单->更多工具->扩展，可以进入插件管理页面，也可以直接在地址栏输入chrome://extensions进行访问。如下所示。

　　

　　勾选开发者模式直接以文件夹的形式在插件中文件夹，否则只能安装.crx格式的文件。Chrome要求插件必须从其Chrome应用商店安装，其他任何网站下载都不能直接安装，所以其实我们可以解压crx文件，通过开发者模式直接加载。

　　在开发过程中，对代码的任何更改都必须重新加载插件，只需在插件管理页面按Command+R，以防万一最好刷新页面。也可以直接点击插件的刷新按钮，同步本地代码。如下所示。

　　

　　二、核心介绍2.1 manifest.json

　　{

 "name": "SourceMapRedirect", // 插件名称

 "description": "Try to redirect sourcemap to ftp server", // 插件描述

 "version": "1.0", // 插件版本

 "manifest_version": 2, // 清单文件的版本，必填

 "permissions": [ // 权限申请（基本上需要使用的chrome插件api都需要进行权限申请）

   "webRequest",

   "webRequestBlocking",

   "", //使用到的url也需要进行权限申请，也可以写成 "http://*/*", "https://*/*"，可 以通过executeScript或者insertCSS访问的网站

   "declarativeNetRequest"

],

 "background": { // 会一直常驻后台的JS或后台页面

   "scripts": [

     "background.js"

  ]

   // "page": "background.html" // 两种指定方式，如果指定js，那么会自动生成一个背景页

},

"content_scripts": [

  {

    //"matches": ["http://*/*", "https://*/*"],

// "" 表示匹配所有地址

"matches": [""],

// 多个JS按顺序注入

"js": ["js/jquery-1.8.3.js", "js/content-script.js"],

// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式

"css": ["css/custom.css"],

// 代码注入的时间，

    // 可选值： "document_start", "document_end", or "document_idle"

     // 最后一个表示页面空闲时，默认document_idle

"run_at": "document_start"

  }

]

 "icons": { // 图标，一般偷懒全部用一个尺寸也没啥问题

   "16": "/images/icon16.png",

   "32": "/images/icon32.png",

   "48": "/images/icon48.png",

   "128": "/images/icon128.png"

},

 "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"

  }

},

 "options_page": "options.html", // chrome40以前的插件配置页写法

 "options_ui": { // chrome40以后的插件配置写法，如果两个都写，新版chrome只认后面这一个

     "page": "options.html",

     // 添加一些默认的样式，推荐使用

     "chrome_style": true

  },

  "declarative_net_request": { // 一个用于拦截请求的chrome api，暂时不用管它

   "rule_resources": [{

     "id": "ruleset_1",

     "enabled": true,

     "path": "rules.json"

  }]

},

}

复制代码

　　我使用 manifest_version 的第 2 版。已经有3个版本了，推荐正式版3。但是由于我要使用的webRequest api对3的支持有问题，所以我使用的是版本2。而且官网上的例子大部分都是版本2，所以对于初学者来说，版本2相对更友好一些。

　　content-scripts 是一种将脚本注入页面的 chrome 插件。它与原创页面共享 DOM，但不共享 JS。如果要访问页面JS（比如一个JS变量），只能通过注入的js来实现。content-scripts 无法访问大部分 chrome.xxx.api，除了以下 4 个：

　　2.2 背景

　　背景是常驻页面。它的生命周期是插件中所有类型页面中最长的。浏览器打开时打开，浏览器关闭时关闭。因此，通常会放置需要一直运行的全局代码。在里面。权限高，可以调用几乎所有的chrome扩展api（devtools除外）

　　可以跨域无限制，即可以访问任意网站跨域，无需对方设置CORS。

　　可以通过page指定网页，也可以直接通过脚本指定一个js，chrome会自动为这个js生成一个默认网页。

　　需要注意的是，虽然你可以直接通过chrome-extension://xxx/background.html打开后台页面，但是你打开的后台页面并不是真正在后台运行的页面。也就是说，你可以打开无数个background.html，但真正常驻后台的只有一个，而且你永远看不到它的界面，只能调试它的代码。

　　2.3 个事件页面

　　鉴于后台生命周期太长，长时间挂载后台可能会影响性能，所以谷歌又做了一个event-pages。在配置文件中，它和后台唯一的区别就是多了一个持久化参数：

　　{

 "background": {

   "scripts": ["event-page.js"],

   "persistent": false

}

}

复制代码

　　它的生命周期是：需要时加载，空闲时关闭，需要时调用什么？例如首次安装、插件更新、让内容脚本向其发送消息等。

　　除了配置文件的变化外，代码也有一些小的变化。这是一个简单的理解。一般后台不会消耗很多性能。

　　三、请求转发接口

　　// background.js

​

chrome.webRequest.onBeforeRequest.addListener(

(info) => {

   if (info.url.includes(".map")) {

     console.log("source map files: " + info.url);

  }

   return { redirectUrl: XXX } // 希望重定向的地址

   // 如果需要拦截请求可以返回{cancel: true}

},

 // filters

{

   urls: [

     ""

  ]

},

 // extraInfoSpec

["blocking"]

);

复制代码

　　实际上，我最初想处理源地图的安全问题。希望把sourcemap文件上传到内网，从公网删除。调试完成后，将公网发起的sourcemap请求转发到内网，保证安全，方便调试。

　　在实际实现中发现了一个致命的问题，对请求的拦截和转发实现的非常好。但是，谷歌浏览器根据js末尾注释代码#sourceMappingURL=bundle.js.map自动发起的sourcemap请求，无法通过webRequest api获取。我也尝试了 declarative_net_request api，但我无法抓住它。我猜可能的原因是谷歌浏览器本身忽略了网络面板中对sourcemap的自动请求（注意谷歌浏览器只会在开发面板打开时自动请求sourcemap文件），所以提供的api无法抓包，也是可以理解（我就是这么说服自己的……）当然，如果在地址栏输入sourcemap文件的地址，

　　由于以上原因，无法使用chrome来实现sourcemap转发请求。但是还是学到了一些chrome插件的开发，能抓到的请求都可以很方便的转发。

　　最终解决方案：使用whistle脚本自动添加转发规则。

　　因为whislte，charles，这些抓包工具可以抓取谷歌浏览器自动发起的sourcemap请求，那么就很简单了，写规则转发。为了方便维护，在代码中添加一个whistle脚本，这样只要脚本运行就可以添加转发规则。

　　// .whistle.js

​

const pkg = require('./package.json');

​

let projectDomains = ['XXX', 'XXXX', 'XXXX']

let sourceMapFolder = 'XXXXX'

let ftp_ip = 'XXXXX'

​

exports.name = `[${pkg.name}]本地环境配置`;

exports.rules = `

/[http|https]://[^/]*(${projectDomains.join('|')})/(.+.map)/ ${ftp_ip}/${sourceMapFolder}/$2

`;

复制代码

　　// package.json

{

 ...

 "scripts": {

   ...

    "add_whistle_config": "w2 add --force",

   ...

}

 ...

}

复制代码

　　参考文档

　　…

　　…

　　/文档/扩展...

　　/谷歌铬...