作者leondemon (狗狗)
看板Web_Design
標題[問題] Content Script要如何拿到root document
時間Fri Sep 30 16:58:50 2016
我在開發瀏覽器套件，
利用 content script 來取得 HTML document 來注入一些 HTML elements
但是發現以下的 code 會注入到所有的 document，
包括頁面中 iframe 的獨立 HTML document：
```js
// @content_script.js
// 建立 HTML element
const elem = document.createElement('a');
elem.setAttribute('href', '
https://.....');
elem.innerHTML = 'ClickHere';
// 插入到 document.body 內
document.body.appendChild(elem);
```
以上 content script 代碼會在每個 HTML document 載入時都會執行 (包括 iframe 內)
有什麼方法能指載入到瀏覽器頁面開的「根」HTML document 呢？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.117.85.61
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1475225933.A.4BB.html
1F：→ mirtac: 那個瀏覽器的？ 09/30 17:11
目前是 Chrome，但希望代碼能在每個瀏覽器都通用
2F：→ mcmj5566: 載入content_script時同時載入jquery，再指定第一個body 09/30 17:46
3F：→ mcmj5566: 看看？ 09/30 17:46
我是前端新手，還沒學過 jquery... 囧rz
不過要在 content script 中用 jquery 的話，似乎需要把 jquery 包進 extension 中
不知道有沒有既有 HTML5 Web API 可以達到效果？
另外一個大問題，
我看了一下 JavaScript 可以調用的 DOM/HTML Web API
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
很多 API 都是廢棄、一些瀏覽器不支援、實驗階段不建議使用...。
而且我也不知道這些 API 是否在各個瀏覽器都支援
想知道哪邊有通用 DOM/HTML Web API 的教學 (google 沒看到)，
以及各瀏覽器都支援的 API 列表
不然閱讀這樣的文件，非常不切實際 (吃時間、沒效率)
※ 編輯: leondemon (123.117.85.61), 09/30/2016 18:18:32
4F：→ akccakcctw: 支援度可以到caniuse查 09/30 18:26
5F：推 eight0: 檢查 window.top == window 09/30 18:35
感謝！！！！可以判斷沒錯 :)
6F：推 Ayukawayen: content_scripts有all_frames屬性 不過預設就是false 09/30 18:39
Bingo!! 當時 copy 別人的代碼，沒有注意到這個屬性的意義... 囧
7F：推 YoyaKazuma: 我想講的樓上已經講了XD 09/30 18:43
8F：→ YoyaKazuma: 預設應該是不會載入 iframe 裡才對 , 不知道是不是你 09/30 18:44
9F：→ YoyaKazuma: 另外加上去的 09/30 18:44
感謝～～樓上的話一時沒反應過來，看到你幫忙補出這段話我才發現這個問題
※ 編輯: leondemon (123.117.85.61), 09/30/2016 18:55:11
10F：推 Ayukawayen: 還真的是這個喔 我想說如果有設定到應該會想到才是 XD 09/30 20:35
11F：→ leondemon: XDDDD 人總是有犯蠢的時候... Orz 09/30 22:23