56304

Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a

I am working on a Chrome extension content script that will, on specific pages, inject additional content onto the page to add functionality to an existing site.

I have an HTML file that is in my Chrome extension that contains the template for content that will be added. I am hoping I can use jQuery to retrieve that HTML template. I initially tried a simple jQuery AJAX request, like this:

var url = "template.html"; $.get(url,function(data, textStatus, jqXHR){ console.log("Got the template!"); console.log(data); },"html");

However, this results in the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc' is therefore not allowed access.

This sounds like a Chrome Extensions permissions issue, and the relevant permission seems to be the [scheme]:[host]/* permissions issue. My extension ID is gmjipglelhnlbakmlobgffnpceaalnnc, so I tried adding permission for chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc/ (which according to this is the prefix for fully qualified Chrome Extension packaged resources).

That didn't work, as Chrome told me Permission 'chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc/' is unknown or URL pattern is malformed.

A little more reading and I found that there is a specific facility, described here under extension origin, to request packaged resources. That's all well and good, but I would prefer to use a uniform API to request resources, i.e., to be able to use jQuery to pull down my template files, as I've been doing for regular "vanilla" web apps (i.e., not Chrome extensions).

Is there a way to configure my Chrome extension permissions so that I can request "extension origin" resources via jQuery's AJAX facilities?

Answer1:

Found my answer. You have to explicitly add either the individual extension resources, or patterns that match your extension resources, in the manifest via web_accessible_resources.

Once you've done this, you can construct the URL using chrome.extension.getURL(resourcePath).

Here's an excerpt from my manifest:

"web_accessible_resources" : [ "*.html" ]

And here's the code I'm using to request my template file:

var url = chrome.extension.getURL("template.html"); $.get(url,function(data, textStatus, jqXHR){ console.log("Got the template!"); console.log(data); },"html");

Recommend

  • how to remove parsererror: SyntaxError: Unexpected token < in JSON at position 0
  • Having two $.ajax() calls in one script
  • jsTree JSON with MVC
  • record post in asp.net mvc 3 and jquery
  • jQuery - Wait for a function to return value
  • jquery ajax fails in firefox
  • Google Adsense inside a jquery dialog?
  • How to check for connectivity with server using javaScript from native Android 2.1 browser?
  • MySQL Order by column = x, column asc?
  • Is playing sound in Javascript performance heavy?
  • Detect when Facebook like button is clicked
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Insert into database using onclick function
  • Spring security and special characters
  • Perl system calls when running as another user using sudo
  • Knitr HTML Loop - Some HTML output, some R output
  • Upload files with Ajax and Jquery
  • jquery mobile loadPage not working
  • Apache 2.4 - remove | delete | uninstall
  • How to pass list parameters for each object using Spring MVC?
  • Circular dependency while pushing http interceptor
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Benchmarking RAM performance - UWP and C#
  • Load html files in TinyMce
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • Linking SubReports Without LinkChild/LinkMaster
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy