如何使图像出现在屏幕的中心与谷歌Chrome扩展

How to make image appear in the center of screen with a Google Chrome Extension?

本文关键字：谷歌 扩展 Chrome 屏幕 图像 何使      更新时间：2023-09-26

我正在研究另一个Chrome扩展，当点击时，播放声音和在当前网页的中间显示png。这是我的舱单。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");
}
这是我的音频。js文件: 
chrome.browserAction.onClicked.addListener(function(tab) {
    var myAudio = new Audio();
    myAudio.src = "audio.mp3";
    myAudio.play();
});
点击

时，会播放声音，但不显示图片。什么好主意吗?谢谢!

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

"工具栏按钮只能有一个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()
相关文章：