[問題] Content Script要如何拿到root document

看板Web_Design作者 (狗狗)時間7年前 (2016/09/30 16:58), 7年前編輯推噓4(407)
留言11則, 7人參與, 最新討論串1/1
我在開發瀏覽器套件, 利用 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://www.ptt.cc/bbs/Web_Design/M.1475225933.A.4BB.html

09/30 17:11, , 1F
那個瀏覽器的?
09/30 17:11, 1F
目前是 Chrome,但希望代碼能在每個瀏覽器都通用

09/30 17:46, , 2F
載入content_script時同時載入jquery,再指定第一個body
09/30 17:46, 2F

09/30 17:46, , 3F
看看?
09/30 17:46, 3F
我是前端新手,還沒學過 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

09/30 18:26, , 4F
支援度可以到caniuse查
09/30 18:26, 4F

09/30 18:35, , 5F
檢查 window.top == window
09/30 18:35, 5F
感謝!!!!可以判斷沒錯 :)

09/30 18:39, , 6F
content_scripts有all_frames屬性 不過預設就是false
09/30 18:39, 6F
Bingo!! 當時 copy 別人的代碼,沒有注意到這個屬性的意義... 囧

09/30 18:43, , 7F
我想講的樓上已經講了XD
09/30 18:43, 7F

09/30 18:44, , 8F
預設應該是不會載入 iframe 裡才對 , 不知道是不是你
09/30 18:44, 8F

09/30 18:44, , 9F
另外加上去的
09/30 18:44, 9F
感謝~~樓上的話一時沒反應過來,看到你幫忙補出這段話我才發現這個問題 ※ 編輯: leondemon (123.117.85.61), 09/30/2016 18:55:11

09/30 20:35, , 10F
還真的是這個喔 我想說如果有設定到應該會想到才是 XD
09/30 20:35, 10F

09/30 22:23, , 11F
XDDDD 人總是有犯蠢的時候... Orz
09/30 22:23, 11F
文章代碼(AID): #1NxYbDIx (Web_Design)