Question

我正在学习如何编写chrome扩展，我发现了一个例子，使用browseaction可以改变网页的背景颜色，我正在尝试做一些非常相似的事情，改变背景图像，但由于某种原因...它不起作用，js功能是：

function click(e) {
  chrome.tabs.executeScript(null,
      {code:"document.body.style.background=url('ffrontier.jpg')"});
  window.close();
}

我很确定这是关于我的sintax但是我无法弄明白，有人可以帮助我吗？感谢很多

Answer 1

首先，您需要在manifest.json文件中指定资源（请参阅Web Accessible Resources），如下所示：

"web_accessible_resources": ["ffrontier.jpg"]

其次，您应该像这样指定完整的图片网址：

function click(e) {
  chrome.tabs.executeScript(null,
      {code:"var imgURL = chrome.extension.getURL('ffrontier.jpg'); document.body.style.backgroundImage='url(' + imgURL + ')'"});
  window.close();
}

Answer 2

更新：只有像网址（http://www.stackoverflow.com）这样的外部网址可以使用，而不是本地文件。抱歉。我只是删除了url()中的引号，它对我有效！

function click(e) {
  chrome.tabs.executeScript(null,
      {code:"document.body.style.backgroundImage = 'url(ffrontier.jpg)'"});
}

Answer 3

您需要更改background-image属性，而不是background属性（指的是页面的背景颜色）。

function click(e) {
  chrome.tabs.executeScript(null,
      {code:"document.body.style[background-image]=\"url('ffrontier.jpg')\""});
  window.close();
}

需要注意的事项：document.body.style.background-image会抛出错误，因为您无法在变量名中使用-符号。您必须改为使用对象语法：

document.body.style[background-image]

使用BrowserAction设置背景图像

3 个答案: