Calling Chrome's Internal Pages

[Jeff Cowles]

I'm creating my first extension to load a custom HTML new tab page. I want to include links on it to launch a handful of Chrome's internal pages (chrome://history, etc.). I have searched for help (including through these Google forums) but I just can't get it to work. 

My manifest.json:

{

  "name": "My new tab page",

  "description": "Overrides Chrome's new tab page with a custom HTML page. Also includes ability to link to Chrome's internal pages.",

  "version": "0.1",

  "incognito": "split",

  "chrome_url_overrides": {"newtab": "index.html"},

  "background": {"scripts": ["background.js"], "persistent": false},  

  "permissions": [ "tabs" ],

  "manifest_version": 2

}

My background.js file:

function openChromeBookmarks() {chrome.tabs.create({url: 'chrome://bookmarks/'});}

function openChromeHistory() {chrome.tabs.create({url: 'chrome://history/'});}

function openChromeExtensions() {chrome.tabs.create({url: 'chrome://extensions/'});}

function openChromeSettings() {chrome.tabs.create({url: 'chrome://settings/'});} 

Code for my link in the index.html file:

<a href="chrome://history/" onclick="chrome.extension.getBackgroundPage().openChromeHistory()"><img class="iconsm" src="images/history.png" alt="history" /></a>

No other javascript-related code appears in the header of the html file. 

Any ideas? I appreciate your replies in advance.  

 

 

[PhistucK]

If you add alert("Got here") or any other statement that does something you can surely notice, does it get run?

☆PhistucK

--
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 http://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/15b3272b-9783-446b-9a19-add446b4f80c%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

[Jeff Cowles]

Thanks for replying.  Are you saying I should add alert("somemessage") to the javascript file or to the manifest.json (or somewhere else)? 

[PhistucK]

Into the "openChromeHistory" function, just to see if it actually runs.

☆PhistucK

--
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 http://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/676f87e3-dc05-41ed-af0d-c3d4cc06edbc%40chromium.org.

[Rob Wu]

Take a look at https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution

Kind regards,
 Rob
 https://robwu.nl

[PhistucK]

Oops. Right!

Move your script to an external file and call it from the page using <script src="relative-path-to-file.js"></script>

Inline scripts are forbidden (inline event handlers are also inline scripts).

Use the Developer Tools (F12) to debug such issues, it is pretty informative.

☆PhistucK

--

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 http://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/90d407ba-1a5e-4e12-ad34-dbd35f83a43d%40chromium.org.

[Jeff Cowles]

I added the  ...... <script src="relative-path-to-file.js"></script> .... to the header of my HTML file.  I then added the Alert into my javascript.  When I refresh the extension and test the page, the alert message does not appear so I'm concluding that the javascript is never called. 

I opened the F12 developer tools as you suggested (thanks), and this is what I received.  

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". index.html:161

Not allowed to load local resource: chrome://history/

It looks like there are two issues here:

• It appears it still doesn't like how I'm calling my javascript. It still thinks they are inline even though I'm trying to refer to a separate file.  (I have <script src="background.js"></script> in my HTML file's header.)
• The second message above makes me suspect that my HTML links aren't constructed correctly.  Again, here's the HTML code:

<a href="chrome://history/" onclick="chrome.extension.getBackgroundPage().openChromeHistory()">ICON FILE</a>

Is it constructed correctly?  Is Chrome rejecting the initial href value, and therefore not reading the onclick value?   If so (or if it's something else) how would I fix it?

 

 

☆PhistucK

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

To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.

[Jeff Cowles]

Thank you.  I looked at that page, but I'm afraid I don't understand it enough to know if one of the "don't dos" listed on that page apply to my code.  I'm sure there's good information there, I just don't have enough javascript knowledge to be able to interpret it to my situation. 

[Joe Marini]

Did you read  https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution?

You can't have inline event handlers. You need to use addEventListener() to attach the event handler to the link tag.

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 http://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/c71dd102-af7f-4e61-8a5a-7250e847e498%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

--

Joe Marini

Developer Advocate / Chrome Apps, Extensions, Web Store

joem...@google.com | +Joe Marini | @joemarini

[Jeff Cowles]

Thanks for your reply.  I read the Content Security Policy page, as you suggested, and I'm afraid it exceeds my knowledge level at this time.  I understand that I need to move most of the scripting to an external .js file, but I just don't know enough about event listeners and click handlers to know how to implement it.  I'll keep trying. 

☆PhistucK

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

To post to this group, send email to chromium-...@chromium.org.

Visit this group at http://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/90d407ba-1a5e-4e12-ad34-dbd35f83a43d%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

--
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.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://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/c71dd102-af7f-4e61-8a5a-7250e847e498%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

[Joe Marini]

Instead of: 

<a href="chrome://history/" onclick="chrome.extension.getBackgroundPage().openChromeHistory()">ICON FILE</a>

You need to do this in your script file:

document.getElementById("linkTag").addEventListener("click", function() {

   document.extension.getBackgroundPage().openChromeHistory();

})

change your <a> tag to have an id attribute on it: <a id="linkTag"> or whatever you want.

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 http://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/6da97751-6ad2-4356-af6f-e57908f9f5da%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

[Rob Wu]

Joe meant "chrome.extension" instead of "document.extension".

That's not sufficient. Because you have added "persistent": false to your manifest file, the background page can be suspended when it's idle (learn more about these so-called "event pages" at https://developer.chrome.com/extensions/event_pages).

The correct way to activate the method is:

document.getElementById("linkTag").addEventListener("click", function() {

   chrome.runtime.getBackgroundPage(function(background) {
     background.openChromeHistory();
   });
});

Though, why don't you just put the extension code in the same page? That would simplify your design...

Kind regards,
 Rob

 https://robwu.nl/

[Joe Marini]

Gah, yes, that's what I meant, sorry.

[Jeff Cowles]

Thanks to both you and Joe for offering your thoughts and help.  I appreciate it. 

If I understand correctly, you're saying that in my background.js file I need to:

• retain all the individual functions for the pages I want to open (such as...  function openChromeExtensions()  {chrome.tabs.create({url: 'chrome://extensions/'});  } 
• then add the activating code you give above. 

Questions:

• Do I need to duplicate the activating code for each of the pages I want to open?  E.g., once for History, another for Settings, etc.)?
• If so, can I use the same linkTag ID for all links, or should I create separate IDs for each type of link (e.g., linkHistory, linkSettings, etc.)

 And then in my index.html file I should:

• replace my <a href> links completely with a simplified link that looks like this..... <a id="linkHistory">ICON FILE</a>.

Question:

• Is that new <a> tag sufficient for the HTML page to know that it's a link?  
  

 

Jeff

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/c71dd102-af7f-4e61-8a5a-7250e847e498%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

--

Joe Marini

Developer Advocate / Chrome Apps, Extensions, Web Store

joem...@google.com | +Joe Marini | @joemarini

--
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.

To post to this group, send email to chromium-...@chromium.org.

Visit this group at http://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/6da97751-6ad2-4356-af6f-e57908f9f5da%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

[PhistucK]

Regarding the last question, <a> needs an href in order to look like a link.

<a id="...">bla</a> will not show up as a link.

<a href="..." id="...">bla</a> will.

☆PhistucK

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 http://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/63e9e715-b4ef-4e13-bf79-39cf20e1c184%40chromium.org.

[Jeff Cowles]

I have more experience with HTML, so I wondered how the browser would even recognize a link if there was no href portion to it.   

But, now, when I put a value into the href part, the browser recognizes that INSTEAD of the ID tag.  The browser doesn't go execute the javascript and doesn't pull up the appropriate Chrome internal page. 

Jeff

☆PhistucK

 

Jeff

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/6da97751-6ad2-4356-af6f-e57908f9f5da%40chromium.org.

For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

--

Joe Marini

Developer Advocate / Chrome Apps, Extensions, Web Store

joem...@google.com | +Joe Marini | @joemarini

--
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.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.

[PhistucK]

Unless you post the latest code, it would be hard to help.

☆PhistucK

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 http://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/ec3ebbf9-18dd-48e9-9512-9c267e8f9bdc%40chromium.org.

[Jeff Cowles]

Thanks again for being willing to help.  Here's my latest code. 

I opened Chrome's debugger console (F12). When the page loads I get the following error: Uncaught TypeError: Cannot call method 'addEventListener' of null.  I suspect that my json and html pages are linking correctly and calling the right resources, and that the issue remains in my code in the .js file as well as my links in the html file.  It appears that Chrome finds my background.js file and tries to run the code, but chokes on the addEventListener part.   

manifest.json (I don't suspect that there's any issue with it, but I include it just in case.) 

{

  "name": "New tab page",

  "description": "Overrides Chrome's new tab page with a custom HTML page. Includes ability to link to Chrome's internal pages.",

  "version": "0.1",

  "incognito": "split",

  "chrome_url_overrides": 

{"newtab": "index.html"},

  "background": {

    "scripts": ["background.js"],

    "persistent": false

  },  

  "permissions": [ "tabs" ],

  

  "manifest_version": 2

}

index.html 

• In the head I have <script src="background.js"></script>.
  
• In the body, each link to a Chrome internal page uses an icon. An example of the link code is ... <a href="chrome://bookmarks" id="linkBookmarks"><img class="iconsm" src="images/bookmarks.png" alt="bookmarks" /></a>
  

Note: I don't have separate ID tags in the html file's header to define these IDs in any way. Is that necessary, or is the call to background.js supposed to handle that? 

background.js

I don't have experience with javascript. I tried to implement advice from other posters, but I fear that I've just created a mess.  Do I need separate document.getElementById code (as well as ID tags) for each function? 

function openChromeBookmarks() 

{        chrome.tabs.create({url: 'chrome://bookmarks/'});      }

function openChromeHistory() 

{        chrome.tabs.create({url: 'chrome://history/'}); }

function openChromeExtensions() 

{       chrome.tabs.create({url: 'chrome://extensions/'}); }

function openChromeSettings() 

{       chrome.tabs.create({url: 'chrome://settings/'}); }

document.getElementById("linkHistory").addEventListener("click", function() {

   chrome.runtime.getBackgroundPage(function(background) {

     background.openChromeHistory();

   });

});

document.getElementById("linkBookmarks").addEventListener("click", function() {

   chrome.runtime.getBackgroundPage(function(background) {

     background.openChromeBookmarks();

   });

});

document.getElementById("linkExtensions").addEventListener("click", function() {

   chrome.runtime.getBackgroundPage(function(background) {

     background.openChromeExtensions();

   });

});

document.getElementById("linkSettings").addEventListener("click", function() {

   chrome.runtime.getBackgroundPage(function(background) {

     background.openChromeSettngs();

   });

});

 

[PhistucK]

These are general development issues and this is generally not the place for such.

You are trying to add event listeners to elements that do not exist yet.

The script is within the <head>, so it gets executed before the HTML parser creates the DOM tree with the elements that have the ID you specified.

Either move the script to the end of <body>, or use window.addEventListener("DOMContentLoaded", function () { /* all of the code goes here. */ }, false);.

Use Google and StackOverflow for general development inquires. You are likely to find the answers fast enough.

☆PhistucK

--
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 http://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/d8c9e409-b554-4e13-962d-e1f4b11a899c%40chromium.org.

[Jeff Cowles]

Thank you very much.  Your advice appears to have fixed my error; I no longer receive it. 

I'm still having trouble with the construction of the links in HTML, however.  I need to have an href element so that HTML knows that my icons have links. But what should that href element be?   The following.....

<a href="chrome://bookmarks" id="linkBookmarks"><img class="iconsm" src="images/bookmarks.png" alt="bookmarks" /></a>

... attempts to open the chrome://bookmarks page immediately (resulting in an error) and never seems to read the ID tag.  Any ideas?

[PhistucK]

Again, this is a general development question, inappropriate in this group.

The hRef attribute should not matter, the event handler will run anyway, whether the hRef is legal, blocked or whatever.

You can use "#" as the value. This is what most of the developers do when they need an anchor but have no real use for its hRef.

Rob suggested that you move the functions that actually open the pages into the (external) script file of the new tab. That may help you debug stuff and you would not need to call chrome.runtime.getBackgroundPage (which is asynchronous and complicates the flow) or anything, just call the functions that you put in background.js (you can simply add <script src="background.js"></script>) directly.

☆PhistucK

--

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 http://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/a6ad6088-44e8-46d6-ba89-58c840db558b%40chromium.org.

[Jeff Cowles]

Thanks.  Like I said, I really appreciate you taking the time to answer my questions.  I still don't know how to follow Rob's suggestion to move functions, but I'll try to take the remainder of my questions to the proper forum.   Have a good day. 

Jeff

On Thursday, February 20, 2014 2:34:34 PM UTC-3, PhistucK wrote:

Again, this is a general development question, inappropriate in this group.

The hRef attribute should not matter, the event handler will run anyway, whether the hRef is legal, blocked or whatever.

You can use "#" as the value. This is what most of the developers do when they need an anchor but have no real use for its hRef.

Rob suggested that you move the functions that actually open the pages into the (external) script file of the new tab. That may help you debug stuff and you would not need to call chrome.runtime.getBackgroundPage (which is asynchronous and complicates the flow) or anything, just call the functions that you put in background.js (you can simply add <script src="background.js"></script>) directly.

☆PhistucK

On Thu, Feb 20, 2014 at 5:49 PM, Jeff Cowles <jeff....@gmail.com> wrote:

Thank you very much.  Your advice appears to have fixed my error; I no longer receive it. 

I'm still having trouble with the construction of the links in HTML, however.  I need to have an href element so that HTML knows that my icons have links. But what should that href element be?   The following.....

<a href="chrome://bookmarks" id="linkBookmarks"><img class="iconsm" src="images/bookmarks.png" alt="bookmarks" /></a>

... attempts to open the chrome://bookmarks page immediately (resulting in an error) and never seems to read the ID tag.  Any ideas?

--
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.

To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.