What causes Chrome Extension Images to appear broken when they are inserted into the DOM?

Currently working on a Chrome extension, I am attempting to insert a div with a background image into the DOM using a content script. The CSS is loading correctly, and upon inspecting the Developer Tools, the image URL appears to be correct.

$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');

When inspecting the URL in the console, it shows as 

chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png

Despite this, the image fails to load as the background. Interestingly, if I use the same URL as the src attribute of an img tag, the image simply displays as broken in the browser.

However, when directly pasting the URL into the browser's address bar and loading it, the image appears perfectly fine. What might be causing the issue when trying to load it into the DOM?

javascriptjqueryhtmlcssgoogle-chrome-extension

Answer №1

After some research, I came across the solution for accessing files in the chrome extension docs. By default, files located in the extension root are not readily available in the web page DOM. However, developers have the option to change this behavior by using the "web_accessible_resources" setting in the manifest.json file:

http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources

{
  ...
  "web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

I would also like to give a special mention to Matt Greer's suggestion of utilizing a data URL, which I believe is another effective approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing the Sending of Origin Header in Angular 2

I am facing an issue in my Angular2 project where the HTTP service is automatically adding the 'Origin' header with a value to all of the requests. Is there a way to stop Angular2 from including this 'Origin' header in the HTTP calls? A ...

javascripthttpangularcorshttp-post

Issue with Angular-cli: typescript files not being generated when using the --dev option

Currently using angular-cli version 1.0.0-beta.14 with node version 6.6.0 on a Windows 32 bit x64 operating system. This setup utilizes the webpack version of angular-cli and I can successfully use ng build to compile. The output of ng build indicates that ...

javascriptangularangular-cli

tips for accessing variables within app.get

Is there a way to make a variable or a set of variables inside app.get accessible throughout the entire project? I am working on capturing information from an SMS text message, organizing it into the "messageData" variable, and then sending it to the "Mess ...

javascriptnode.jsmongodb

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides? Both Blogs and History have dropdown menus. Check out this screenshot: (source: gyazo.com) CSS: .navbar ul { list-style: none; margin: 0; pad ...

htmlcsscenter

Troubleshooting Tips: Removing a Specific Line from a Canvas Using Javascript

I need to find a method for removing a specific line without having to clear and redraw it. Learn more about clearing specific lines in Canvas with HTML5 I came across this question where everyone suggested clearing the entire page and redrawing it. Is t ...

javascripthtmlcanvas

What is the best way to retrieve data from within HTML tags using PL/SQL?

Within my Oracle PL SQL project, I am dealing with an html file that contains the following comment tag. I need to figure out how to retrieve the value between these comment tags. <comment label="Comments">Text_to_Extract</comment>&l ...

htmloracleplsql

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

javascriptphpjqueryhtmlajax

The landscape orientation causes the button bar to overflow by 100% of the body height

Imagine the scenario below: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> html, body { padding: 0; margin: 0; ...

ioscssiphonesafari

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

javascriptnode.jsreactjs

Using VueJs's createElement() to dynamically insert HTML content

I am currently working on a component that converts all icons to SVG format. By the end of my code, I have included the following: return createElement('i', '<SVG>CODE</SVG>' ) In the spot where the SPA ...

javascriptvue.jscreateelement

The Javascript function must be executed with each page reload

Currently, I am analyzing an asp.net 2 web application that is in my care (even though I did not create it). There seems to be an issue with certain functionalities not working consistently when the page loads, particularly if using Firefox 3 within a vir ...

javascriptjqueryajaxasp.net-ajax

A step-by-step guide on selecting a checkbox within an alert popup using Selenium with Java

Hello everyone, I am struggling to find a solution for checking and unchecking a checkbox located in an alert window or modal pop-ups. We have three types of pop-ups: alert, confirm, and prompt. Specifically, in the confirm popup, there is a checkbox t ...

javascriptjavaseleniumwebdriver

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript

Hi everyone, I am new to JavaScript. I am currently working on creating two dropdown lists, one for 'Start Time' and another for 'End Time'. These dropdown lists will display hours in a 24-hour format with intervals of 30 minutes. In t ...

javascriptphphtmlajax

Tips for transferring information from one php page to another php page via ajax

I am attempting to retrieve data from one PHP page and transfer it to another page through the use of Ajax. JavaScript : $.ajax({ url: "action.php", success: function(data){ $.ajax({ url: "data.php?id=data" ...

javascriptphpjqueryajax

Is there a way to change TTF files into OTF format?

I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format? ...

cssbrowserfont-face

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

javascripthtmlcss

Effortlessly navigate between Formik Fields with automated tabbing

I have a component that validates a 4 digit phone code. It functions well and has a good appearance. However, I am struggling with the inability to autotab between numbers. Currently, I have to manually navigate to each input field and enter the number. Is ...

javascriptcssreactjsnext.jsformik

Customizing the Twitter bootstrap navigation in Wordpress

I've been working on theming my navigation menu using Twitter Bootstrap. I want it to resemble the demo example of a fixed top banner, which can be seen here: http://getbootstrap.com/examples/navbar-fixed-top/ Although I have managed to get it to wor ...

phpjquerycsswordpresstwitter-bootstrap

Divide the promised variable into separate named variables

Here is a code snippet that I am working with: Promise.all( categories.map(category => Collection.find({ category })) ).then(items => { return items }) Currently, the output is an array with the same length as categories, where each element is ...

javascriptarraysnode.jsmongoosepromise

Divide and conquer- Lighttpd's mod_wstunnel combines separate messages by using UNIX socket communication to the backend server

In my experience with lighttpd's mod_wstunnel, I have encountered a peculiar issue. When I send two messages in quick succession from the backend using a UNIX socket to communicate between lighttpd and the backend, I noticed that lighttpd logs show th ...

javascriptc++jsonwebsocketlighttpd