如何从Firefox插件中将javascript注入页面并运行它？

Question

我正在编写一个Firefox扩展(附加组件),允许用户使用文本和/或绘图注释任何页面,然后保存包含注释的页面图像.用例是客户审阅网页,向页面添加反馈,保存图像并通过电子邮件将其发送回Web开发人员或测试人员获取GUI错误的注释截图等.

我在开发扩展之前在javascript中编写了注释/绘图功能.此脚本<canvas>向页面添加元素以及工具栏(在a中<div>),其中包含<canvas>不同绘制工具的按钮(每个元素),例如线条,框,椭圆,文本等.当手动包含在内时,此工作正常页面.

我现在需要一种扩展方式:

1. 将此脚本注入任何页面,包括我无法控制的页面.
2. 这需要在用户调用扩展时发生,该扩展可以在页面加载之后发生.
3. 一旦注入init()该脚本中添加画布和工具栏元素等的函数需要以某种方式运行,但我无法确定如何从扩展名中调用它.

请注意,一旦注入,我不需要此脚本与扩展交互(因为当用户按下扩展名chrome中的保存按钮时,扩展只会获取整个文档的屏幕截图(并删除添加的页面元素)).

Answer 1

所以这就是我通过设置onload属性来调用脚本中的init函数来解决我的问题的方法.

var myScript = top.window.content.document.createElement('script');
myScript.type = 'text/javascript';
myScript.setAttribute('src','chrome://path/to/script.js');
myScript.setAttribute('onload', 'firefoxInit()');
top.window.content.document.getElementsByTagName('head')[0].appendChild(myScript);