chrome.tabs.executeScript：当我尝试将图像插入特定网站时不起作用

Question

I was trying to insert an image into Amazon.com

Firstly, I verified that following code works fine in chrome console

insertPlace = document.getElementById("rightCol")
myImage = document.createElement("image")
myImage.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif"
myImage.onclick = function() {alert(insertImage.value)}
alert("insertImage running")
insertPlace.insertBefore(myImage)

However, When I assembled this code into chrome extension format, it seems that it didn't work any more. I added "tabs","","activeTab" permissions in manifest.json and the following code is background.js

function insertImage() {
insertPlace = document.getElementById("rightCol")
myImage = document.createElement("image")
myImage.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif"
myImage.onclick = function() {alert(insertImage.value)}
alert("insertImage running")
insertPlace.insertBefore(myImage)}
function execute () {
chrome.tabs.executeScript(null, 
                   insertImage());
}
chrome.tabs.onCreated.addListener(function(tabId, changeInfo, tab) {         
execute();
});

Answer 1

The executeScript function is similar to the eval function, in that it accepts a string of code which it executes. You are attempting to pass the results of the insertImage function (which is null). For the script to work, you must inject all the relevant JS code as a string:

function execute() {
    var script = insertImage.toString() + 'insertImage();';
    chrome.tabs.executeScript(null, { code: script });
}