Question

我正在处理另一个Chrome扩展程序，当点击它时，播放声音并在当前网页的中间显示一个png。这是我的manifest.json文件：

{
  "manifest_version": 2,

  "name": "Picture Sound",
  "description": "Picture Sound",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "scripts": ["picture.js"],
    "default_title": "Picture Sound"
  },
  "background": {
    "scripts": ["audio.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

这是我的picture.js文件：

function show_image()
{
  document.write("img src=picture.png");
}

这是我的audio.js文件：

chrome.browserAction.onClicked.addListener(function(tab) {
    var myAudio = new Audio();
    myAudio.src = "audio.mp3";
    myAudio.play();
});

单击时，声音将播放，但图片不会出现。有任何想法吗？谢谢！

Answer 1

看看你的另一个问题的答案。

＆＃34;工具栏按钮只能有弹出窗口的html文件，没有＆＃34; js＆＃34;参数＆＃34; - wOxxOm

您需要将它添加到您的web_accessible_resources并将其注入您的browserAction.onClicked监听器中，如下所示：

的manifest.json

"web_accessible_resources": ["picture.png"]

background.js

chrome.browserAction.onClicked.addListener(function() {
    new Audio("audio.mp3").play()
    chrome.tabs.executeScript({ file: "picture.js" })
})

接下来，您将要创建图像，但不要使用document.write。

picture.js

var dialog = document.createElement("dialog")
var image = document.createElement("img")
image.src = chrome.runtime.getURL("picture.png")
dialog.appendChild(image)
image.style.width = window.innerWidth + "px"
image.style.height = window.innerHeight + "px"
var close = document.createElement("button")
close.textContent = "Close"
close.addEventListener("click", function() {
  dialog.close()
})
dialog.appendChild(close)
document.body.appendChild(dialog)
dialog.showModal()

如何使用Google Chrome扩展程序将图片显示在屏幕中央？

1 个答案: