Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
Chromium-extensions
Home
About this group
Apply for group membership
CSS file equivalent of chrome.extension.getURL() ?
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   5 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
GeorgesMouth  
View profile  
 More options Jan 19 2010, 8:19 pm
From: GeorgesMouth <geo...@gadgetopolis.com>
Date: Tue, 19 Jan 2010 17:19:28 -0800 (PST)
Local: Tues, Jan 19 2010 8:19 pm
Subject: CSS file equivalent of chrome.extension.getURL() ?
Print | Individual message | Show original | Report this message | Find messages by this author
Anyone know how to resolve a URL for an extension packages file in an
extension's CSS file? In the JavaScript I can just use something like
chrome.extension.getURL("images/overlay/close.png") and it'll return
the "chrome-extension://" URL for the file.

But I'm trying to figure out how to do the same thing in a CSS file,
like one loaded via the manifest.json file like:

   "content_scripts": [ {
      "all_frames": true,
      "css": [ "myStyles.css" ],
       ...
   } ]

I tried using CSS that looks like:

   div.Overlay div.close {
        background:url(images/overlay/close.png) no-repeat;

And, of course, that fails.


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Aaron Boodman  
View profile  
 More options Jan 20 2010, 2:56 am
From: Aaron Boodman <a...@google.com>
Date: Tue, 19 Jan 2010 23:56:48 -0800
Local: Wed, Jan 20 2010 2:56 am
Subject: Re: [crx] CSS file equivalent of chrome.extension.getURL() ?
Print | Individual message | Show original | Report this message | Find messages by this author
You have to either hardcode the full absolute URL create that part of
the CSS dynamically with javascript.

- a


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Peter Blazejewicz  
View profile  
 More options Jan 20 2010, 8:08 am
From: Peter Blazejewicz <peter.blazejew...@gmail.com>
Date: Wed, 20 Jan 2010 05:08:10 -0800 (PST)
Local: Wed, Jan 20 2010 8:08 am
Subject: Re: CSS file equivalent of chrome.extension.getURL() ?
Print | Individual message | Show original | Report this message | Find messages by this author
Hi George,
you could convert your resources to base64 encoded content simply
using e.g. tools like:
http://webcodertools.com/imagetobase64converter/Create
so your css will be:
div.Overlay div.close{
   background-image: url(data:image/png;base64,iVBORw ........
};

regards,
Peter
On Jan 20, 2:19 am, GeorgesMouth <geo...@gadgetopolis.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
GeorgesMouth  
View profile  
 More options Jan 20 2010, 12:10 pm
From: GeorgesMouth <geo...@gadgetopolis.com>
Date: Wed, 20 Jan 2010 09:10:02 -0800 (PST)
Local: Wed, Jan 20 2010 12:10 pm
Subject: Re: CSS file equivalent of chrome.extension.getURL() ?
Print | Individual message | Show original | Report this message | Find messages by this author
You learn something new everyday. That's a cool trick. Thanks.

On Jan 20, 5:08 am, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
GeorgesMouth  
View profile  
 More options Jan 20 2010, 12:20 pm
From: GeorgesMouth <geo...@gadgetopolis.com>
Date: Wed, 20 Jan 2010 09:20:54 -0800 (PST)
Local: Wed, Jan 20 2010 12:20 pm
Subject: Re: CSS file equivalent of chrome.extension.getURL() ?
Print | Individual message | Show original | Report this message | Find messages by this author
On Jan 19, 11:56 pm, Aaron Boodman <a...@google.com> wrote:

> You have to either hardcode the full absolute URL create that part of
> the CSS dynamically with javascript.

Thanks! Had a feeling that was going to be the deal. So, here's what I
did (for anyone that wants an example):

I left the CSS as a separate file and removed the background image
definition from it:

  ...
  div#MailPop div.close {
          position:absolute;
          top:2px;
          right:5px;
          width:35px;
          height:35px;
          cursor:pointer;
  }
  ...

In the Javascript I create the chrome-extension:// URL for the image:

  ...
  var closeButtonURL = chrome.extension.getURL('images/overlay/
close.png');
  ...

The div's that I'm trying to apply this to begin as JavaScript strings
and are injected from the Javascript, so I add the background image in
there using the 'style' attribute:

  ...
  var overlayDiv = '\
  <!-- overlays --> \
  <div class="MailPopOverlay" id="MailPop" style="background-image:url
('+bgImgURL+');"> \
    <div class="close" style="background:url('+closeButtonURL+')"></
div> \
  ...

Then just inject it into the body:

  ...
  $('body').prepend(overlayDiv);
  ...

That did the trick!

Cheers,

George


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2013 Google