javascript - 使用 BrowserAction 设置背景图像

Question

我正在学习如何编写 chrome 扩展程序，我发现了一个示例，其中使用浏览操作可以更改网页的背景颜色，我正在尝试做一些非常相似的事情，更改背景图像，但出于某种原因......它不起作用，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

更新：只有像 url( http://www.stackoverflow.com ) 这样的外部 url 有效，而不是本地文件。对不起。我只是删除了引号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]