javascript - 在 PageMod 的 HEAD 标签顶部插入脚本(Firefox Add-on SDK)

标签 javascript firefox firefox-addon firefox-addon-sdk

我想在通过 page-mod 添加的 Firefox Add-on SDK 内容脚本中插入脚本。因此,当用户转到页面 XXX 时,他会得到一个包含插入脚本的页面。但是,当尝试将其插入 HEAD 顶部时,我收到错误,第一个节点子节点不是对象。

我的内容脚本代码,用于插入 <script>是:

script='<script>var d=new Date(2012,2,24); window.Date=function () {return d;}</script>';

var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild);

这是怎么回事?

最佳答案

您尚未提供Minimal, Complete, and Verifiable Example 。因此,这个答案仅基于您提供的代码。

您如何使用 insertBefore() 的问题:

我注意到的第一个问题是您提供了一个字符串作为 insertBefore() 的第一个参数。当该参数需要是 node object 时.

但是,您指出收到的错误是“第一个节点子节点不是对象”。这与我根据所提供的代码所期望的错误不符。当我把你的代码放在 page-mod 中时内容脚本,我得到的错误是:

console.error: testpagemodinsertBefore:
Object
    - _errorType = TypeError
    - message = Argument 1 of Node.insertBefore is not an object.
    - fileName = resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/loader/sandbox.js -> resource://testpagemodinsertbefore/data/contentScript.js
    - lineNumber = 26
    - stack = @resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/loader/sandbox.js -> resource://testpagemodinsertbefore/data/contentScript.js:26:1|
    - name = TypeError

这是我期望问题中的代码出现的错误。因此,您要么没有发布产生您所说的错误的代码,要么您错误地报告了您在控制台中看到的错误。今后,请准确报告您的内容。更详细的内容总比省略一些内容要好。

插入 HTML 文本:

您的代码:

script='<script>var d=new Date(2012,2,24); window.Date=function () {return d;}</script>';

定义一些您尝试插入到 DOM 中的 HTML 文本。 如果您想插入 HTML 文本而不是插入节点,一种方法是使用 insertAdjacentHTML() 。在代码中执行此操作的一种方法是:

head.insertAdjacentHTML('afterbegin',script);

这适用于大多数 HTML。但是,不会产生 <script> 的内容正在执行/评估的标签。这是for security reasons 。对于攻击者来说,将任意文本插入 DOM 比插入实际节点/元素要容易得多。 HTML 规范指定插入的标签作为文本 will not be executed 插入.

插入 <script>被评估和执行的标签:

我们可以通过创建 <script> 来做到这一点包含所需脚本文本的元素,然后将该元素插入到 DOM 中。

对于您的代码,如下所示:

//Get the first <head> element
let head = document.getElementsByTagName("head")[0];

//The script text desired
let scriptText='var d=new Date(2012,2,24); window.Date=function () {return d;};';

//Add an alert for testing (\n is not needed. But, is more readable when inspecting DOM.)
scriptText = 'window.alert("In inserted script");\n' + scriptText;

//Create a <script> element
let scriptEl = document.createElement( 'script' );
//That is JavaScript
scriptEl.type = 'text/javascript'; 
//Add the script text
scriptEl.textContent = scriptText;
//Insert it as the firstChild of <head>
head.insertBefore( scriptEl, head.firstChild );

进一步阅读:

您似乎希望使用内容脚本与页面脚本进行交互。我建议您阅读 MDN 页面“Interacting with page scripts”。

关于javascript - 在 PageMod 的 HEAD 标签顶部插入脚本(Firefox Add-on SDK),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38933980/

相关文章:

javascript - 如何用CSS创建一个不受页面缩放影响的div背景

javascript - firefox插件中面板内容脚本和页面内容脚本之间的localStorage

javascript - 如何使用 Mozilla Add-on SDK 创建 UI?

browser - 是否有放大尺来测量像素?

javascript - 网格实时搜索 extjs

php - 如何在 Javascript 中使简单的 php 的 foreach 等效?

Firefox 光标不可见,单击其他任何内容时变为可见

node.js - 发送 RESTClient Firefox POST 并在 node.js 中尝试相同的操作

javascript - 修改页面 DOM 的 Firefox 插件

javascript - Google是否以错误的方式使用“延迟”?