如何使用Google Chrome擴展程序使圖像顯示在屏幕中央？

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

查看其他問題的答案。

“工具欄按鈕只能有一個用於彈出的html文件，沒有“ js”參數“-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()