0

I'm working on another Chrome extension that will, when clicked, play a sound and display a png in the middle of the current webpage. Here's my manifest.json file:

{
  "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/"
  ]
}

here's my picture.js file:

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

and here's my audio.js file:

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

when clicked, the sound will play, but the picture does not appear. Any ideas? Thanks!

Baylor Norris
  • 11
  • 5
  • Probably duplicate with this one: http://stackoverflow.com/questions/11804332/insert-an-image-in-chrome-extension – Dayton Wang Sep 03 '15 at 17:24

1 Answers1

1

Look at the answer on your other question.

"The toolbar button can only have an html file for the popup, there's no "js" parameter" - wOxxOm

You need to add it to your web_accessible_resources and inject it inside your browserAction.onClicked listener, like this:

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" })
})

Next, you'll want to create the image, but not using 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()
Daniel Herr
  • 19,083
  • 6
  • 44
  • 61
  • This worked! Thank you so much! But, is there a way to get this image to appear not in a window? Just as a transparent overlay on the middle of the screen? For example, what the producer did in [this](https://chrome.google.com/webstore/detail/do-it/eppncnmppghbndacgkideegigaminkfg?utm_source=chrome-app-launcher-info-dialog) extension, but except with a png instead of a gif, and preferably in the middle of the screen? I would just use his code, but I can't find it anywhere! Thank you so much! – Baylor Norris Sep 08 '15 at 14:27