開發(fā) Chrome 插件使用 jQuery 和解決跨域問題

壹壹伍網(wǎng)盤是個不錯的下載工具,不過瀏覽器本身性能稀爛,運行卡頓。

加上播放視頻還使用 flash 插件,更是讓人煩躁,雖然也支持 HTML5 方式播放,但是頁面缺沒有優(yōu)化,視頻偏離了一大塊(update:后來發(fā)現(xiàn)不是壹壹伍的鍋,原先裝了一個給 HTML5 播放視頻調(diào)速的插件,是插件和這個網(wǎng)頁沖突了,禁用后網(wǎng)頁本身正常了,汗...)。

用其他的 Chrome 瀏覽器加上 115fake 油猴腳本可以正常登陸,但是在線播放的視頻界面位置偏離依舊無解,我原先還以為是瀏覽器不兼容,后來發(fā)現(xiàn)是壹壹伍自己的問題,嘗試過調(diào)出開發(fā)者工具修改樣式,但是很麻煩,每次都得點好幾次,使用 console 界面使用代碼調(diào)整稍微好一些,但是每次都得用選擇器選中視頻后才能生效,很是奇怪。

最近在研究 Chrome 插件開發(fā),突然想用插件方式自動加載后解決這個問題,代碼基本上也就一句話,不過過程中遇到兩個坑,解決過程如下:

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. 匹配站點信息和文檔加載后在執(zhí)行

以上的解決均依賴于 "manifest.json" 文件的配置,整體如下:

"content_scripts": [
   {
      "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.1.min.js","js/index.js"],
      "all_frames": true,
      "run_at": "document_end"
   }
]
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容