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

Question

我正在编写一个 Firefox 扩展程序（附加组件），以允许用户使用文本和/或绘图注释任何页面，然后保存包含注释的页面图像。用例将是客户查看网页、向页面添加反馈、保存此图像并将其通过电子邮件发送给 Web 开发人员或测试人员，以获取 GUI 错误的注释屏幕截图等。

在开发扩展之前，我在 javascript 中编写了注释/绘图功能。该脚本向页面添加了一个<canvas> 元素以进行绘图，以及一个工具栏（在<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);

Answer 2

使用Greasemonkey extension：

允许您自定义网页的显示或行为方式，通过 使用少量的 JavaScript。

已经为各种流行网站提供了数百个脚本 可在http://userscripts.org获取。

您也可以编写自己的脚本。查看 http://wiki.greasespot.net/ 开始使用。