插件 sdk 打开带有预附加图像/html 的新选项卡答案

【问题标题】：Addon sdk open new tab with pre-appended image/html插件 sdk 打开带有预附加图像/html 的新选项卡
【发布时间】：2014-10-30 06:17:49
【问题描述】：

在 Firefox 插件中，我有 main.js 代码：

var button = ToggleButton({
  id: "ee-button",
  label: "EE button",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onChange: captureVisibleTab
});

在这个文件中：（参考：Tab screenshot）

function captureVisibleTab() {
  .
  . 
  .
  .
  var canvas = contentDocument.createElement('canvas');
  canvas.style.maxwidth = region.width + "px";
  canvas.style.maxheight = region.height + "px";
  canvas.width = region.width;
  canvas.height = region.height;
  var ctx = canvas.getContext('2d');
  ctx.clearRect(region.x, region.y, region.width, region.height);
  ctx.drawWindow(contentWindow, region.x, region.y, region.width, region.height, backgroundColor);
  var url = canvas.toDataURL(); 

  tabs.open({
  url: self.data.url("test.html"),
  isPinned: false,
  onOpen: function onOpen(tab) {
  },
  onReady: function(tab)
  {
    console.log('canvas : ' + (JSON.stringify(url)) );
    tab.attach({
    contentScript: 'document.body.style.border = "5px solid red"; document.body.appendChild("Test")'
    });
  }
  });  
  return url;
}

我需要打开一个新标签页，并在 html 中附加此图片。
* 尝试过：window.open => 未定义窗口
* 试过: contentScript:'document.body.style.border = "5px solid red";' => 作品
* 试过： contentScript: 'document.body.style.border = "5px solid red"; document.body.appendChild("Test")' => 错误：

  Message: TypeError: Argument 1 of Node.appendChild is not an object.
  Stack:   @javascript:document.body.style.border = "5px solid red"; document.body.appe
ndChild("Test"):1:47

【问题讨论】：

标签： jquery firefox firefox-addon firefox-addon-sdk browser-addons

【解决方案1】：

对于 url，只需使用带有 html 的数据 url，如下所示：

var escapedHtml = escape('<b>rawr</b><img src="blah">')
var url = 'data:text/html,' + escapedHtml

或者你没有在栏中有一个丑陋的 url，让你的 html 成为一个 blob 并像这样加载 blob url：

var {Blob, File} = Cu.import("resource://gre/modules/Services.jsm", {});
var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var oBlob = Blob([oFileBody], { type: "text/html"});
var blobUrl = URL.createObjectURL(oBlob); //returns a string like blob:null/bbe1b94e-0800-4af2-9d9e-df09c0b9cab3 so paste that into your url bar

【讨论】：