Does anyone have an example page/tabs based chrome extension that uses jQuery please ?

764 views
Skip to first unread message

Aaron Gray

unread,
Feb 16, 2019, 9:13:34 AM2/16/19
to Chromium Extensions
Does anyone have an example page/tabs based chrome extension that uses jQuery please ?

I am having problems getting jQuery to work in a tab based html page extension.

I have tried stuff from Stack Overflow but none of their fixes seem to work.

background.js
~~~~~~~~~~~
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.extension.getURL('page.html')}, function(tab) {
    // Tab opened.
    chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {
      chrome.tabs.executeScript(null, { file: "content.js" });
    });
  });
});

Before adding the 

     chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() { .... });

as suggested by Stack Overflow "articles" I was getting the error :-


As soon as I do the :-

    chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {...});

line I am getting the following error occur :-

     Unchecked runtime.lastError: Cannot access contents of url "chrome-extension://hpnbnfioohjamjenbkigleidhpokegcd/page.html". Extension manifest must request permission to access this host.
     Context_generated_background_page.html
     Stack Trace
     _generated_background_page.html:0 (anonymous function)

I have put the code on GitHub, so either a fix or a pointer to code that works would be well appreciated.


Many thanks in advance,

Aaron


Budi

unread,
Feb 16, 2019, 9:28:11 AM2/16/19
to Aaron Gray, Chromium Extensions
use simple/plain javascript, seems first much harder but getting used
to in short time actually far easier
https://developer.chrome.com/extensions/devguide

On 2/16/19, Aaron Gray <aaron...@gmail.com> wrote:
> Does anyone have an example page/tabs based chrome extension that uses
> jQuery please ?
>
> I am having problems getting jQuery to work in a tab based html page
> extension.
>
> I have tried stuff from Stack Overflow but none of their fixes seem to
> work.
>
> background.js
> ~~~~~~~~~~~
> chrome.browserAction.onClicked.addListener(function(tab) {
> chrome.tabs.create({'url': chrome.extension.getURL('page.html')},
> function(tab) {
> // Tab opened.
> chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {
> chrome.tabs.executeScript(null, { file: "content.js" });
> });
> });
> });
>
> Before adding the
>
> chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function()
> { .... });
>
> as suggested by Stack Overflow "articles" I was getting the error :-
>
> Uncaught ReferenceError: $ is not defined
> <https://stackoverflow.com/questions/30750125/chrome-extensions-uncaught-referenceerror-is-not-defined>
>
> As soon as I do the :-
>
> chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function()
> {...});
>
> line I am getting the following error occur :-
>
> Unchecked runtime.lastError: Cannot access contents
> of url "chrome-extension://hpnbnfioohjamjenbkigleidhpokegcd/page.html".
> Extension manifest must request permission to access this host.
> Context_generated_background_page.html
> Stack Trace
> _generated_background_page.html:0 (anonymous function)
>
> I have put the code on GitHub, so either a fix or a pointer to code that
> works would be well appreciated.
>
> https://github.com/AaronNGray/ChromeExtensionPageTest
>
> Many thanks in advance,
>
> Aaron
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Chromium Extensions" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to chromium-extens...@chromium.org.
> To post to this group, send email to chromium-...@chromium.org.
> Visit this group at
> https://groups.google.com/a/chromium.org/group/chromium-extensions/.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/548e28a6-61bb-408c-ada4-d66fa4af9df2%40chromium.org.
> For more options, visit https://groups.google.com/a/chromium.org/d/optout.
>

PhistucK

unread,
Feb 16, 2019, 9:41:49 AM2/16/19
to Aaron Gray, Chromium Extensions
Have you tried omitting the null parameter in both of the calls? I think optional parameters can (should?) be omitted when not specified.
Not sure it would help anything, but maybe.

☆PhistucK


Aaron Gray

unread,
Feb 16, 2019, 10:07:35 AM2/16/19
to Chromium Extensions, aaron...@gmail.com
On Saturday, 16 February 2019 14:28:11 UTC, abdan wrote:
use simple/plain javascript, seems first much harder but getting used
to in short time actually far easier
https://developer.chrome.com/extensions/devguide

No I have jQuery based components I wish to use, and dont want to write from scratch..
 

Aaron Gray

unread,
Feb 16, 2019, 10:10:39 AM2/16/19
to Chromium Extensions, aaron...@gmail.com
On Saturday, 16 February 2019 14:41:49 UTC, PhistucK wrote:
Have you tried omitting the null parameter in both of the calls? I think optional parameters can (should?) be omitted when not specified.
Not sure it would help anything, but maybe.

No, no difference though still getting the same error message.

Thanks anyway !
 

☆PhistucK


To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.

PhistucK

unread,
Feb 16, 2019, 11:10:57 AM2/16/19
to Aaron Gray, Chromium Extensions
Oh, i see the issue. You are trying to inject scripts into your own extension page (page.html). You cannot run content scripts or use executeScript on an extension page, as far as I know.
Since the extension page is yours anyway, just add <script src="..."></script> into its HTML instead.

(Also, on GitHub, in background.js, chrome.extension.getBackgroundPage().console.log( could be replaced with simply console.log(, since it runs in the background page anyway)

☆PhistucK



☆PhistucK


To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/39bd563e-a04f-4748-97bc-449038f07020%40chromium.org.

Aaron Gray

unread,
Feb 16, 2019, 11:36:27 AM2/16/19
to Chromium Extensions, aaron...@gmail.com
On Saturday, 16 February 2019 16:10:57 UTC, PhistucK wrote:
Oh, i see the issue. You are trying to inject scripts into your own extension page (page.html). You cannot run content scripts or use executeScript on an extension page, as far as I know.
Since the extension page is yours anyway, just add <script src="..."></script> into its HTML instead.

(Also, on GitHub, in background.js, chrome.extension.getBackgroundPage().console.log( could be replaced with simply console.log(, since it runs in the background page anyway)

Great all working thanks !

updated :-


I dont know why I did not have it working originally before going down the route of using executeScript ?

Thanks again,

Aaron


 

☆PhistucK



☆PhistucK


To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
Reply all
Reply to author
Forward
0 new messages