作者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/cn.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