开发 Chrome 插件使用 jQuery 和解决跨域问题

壹壹伍网盘是个不错的下载工具,不过浏览器本身性能稀烂,运行卡顿。

加上播放视频还使用 flash 插件,更是让人烦躁,虽然也支持 HTML5 方式播放,但是页面缺没有优化,视频偏离了一大块(update:后来发现不是壹壹伍的锅,原先装了一个给 HTML5 播放视频调速的插件,是插件和这个网页冲突了,禁用后网页本身正常了,汗...)。

用其他的 Chrome 浏览器加上 115fake 油猴脚本可以正常登陆,但是在线播放的视频界面位置偏离依旧无解,我原先还以为是浏览器不兼容,后来发现是壹壹伍自己的问题,尝试过调出开发者工具修改样式,但是很麻烦,每次都得点好几次,使用 console 界面使用代码调整稍微好一些,但是每次都得用选择器选中视频后才能生效,很是奇怪。

最近在研究 Chrome 插件开发,突然想用插件方式自动加载后解决这个问题,代码基本上也就一句话,不过过程中遇到两个坑,解决过程如下:

1. 无法使用 jQuery,那么 $ 也就无法使用

解决方案:

其实也简单,直接引入即可。

"js": ["js/jquery-1.7.1.min.js","js/index.js"],

2. 提示跨域问题

Uncaught SecurityError: Blocked a frame with origin "xxx" from accessing a frame with origin

因为播放界面使用了 iframe,因此会提示这个问题。

解决方案:

在配置文件中加入一行:

"all_frames": true,

3. 匹配站点信息和文档加载后在执行

以上的解决均依赖于 "manifest.json" 文件的配置,整体如下:

"content_scripts": [
   {
      "matches": [""],
      "js": ["js/jquery-1.7.1.min.js","js/index.js"],
      "all_frames": true,
      "run_at": "document_end"
   }
]

你可能感兴趣的:(开发 Chrome 插件使用 jQuery 和解决跨域问题)