如何將canvas元素嵌入到當前網頁的頂部？

Question

嘗試在Chrome擴展中嵌入當前網頁的畫布元素頂部，但它不起作用。

var image = document.createElement('img'); 
image.onload = drawOntoCanvas(); 
var imgURL = chrome.extension.getURL("sandwich-48.png"); 
image.src = imgURL; 
alert(imgURL); 
function drawOntoCanvas() 
{ 
var testcanvas = document.createElement('canvas'); 
var testcontext = testcanvas.getContext('2d'); 

/// set size 
testcanvas.width = 100; /// "this" = image just loaded 
testcanvas.height = 100; 

testcontext.drawImage(this, 0, 0); 
alert("In content script"); 
document.body.appendChild(testcanvas); 
//testcanvas.parentNode.removeChild(testcanvas); 
} 

對不起，我的天真在此先感謝！

Answer 1

爲了讓您的圖片在網頁上下文中可用，您需要在清單中聲明web_accessible_resources。

---

示例實現是這樣的：

擴展名文件：

  root-directory/ 
         |_____manifest.json 
         |_____content.js 
         |_____someIcon.png 

manifest.json的：

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 

    "content_scripts": [{ 
     "matches": ["*://*/*"], 
     "js":   ["content.js"] 
    }], 

    "web_accessible_resources": ["someIcon.png"] 
} 

CON tent.js：

var image = document.createElement('img'); 
image.onload = drawOntoCanvas; // <-- no `()` when setting the callback 
image.src = chrome.extension.getURL("someIcon.png"); 

function drawOntoCanvas() { 
    var testcanvas = document.createElement('canvas'); 
    var testcontext = testcanvas.getContext('2d'); 

    testcanvas.width = 100; 
    testcanvas.height = 100; 

    testcontext.drawImage(this, 0, 0); 
    document.body.appendChild(testcanvas); 
}