6 Replies - 4160 Views - Last Post: 05 May 2014 - 08:23 PM

#1 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Chrome-extension: Refresh popup.html to a new html page

Posted 04 May 2014 - 05:31 PM

I'm trying to figure out how to redirect to a new html page (which is loaded in the area where popup.html was) once a button has been clicked.

I wrote some test code to try it out, but it's not working. Can someone help me out?

My manifest file
{
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "splash.html"
  }
}


Splash page
<!doctype html>
<html>
  <head>
    <title>Chrome-em-All</title>

    
<script language="javascript" type="text/javascript">
	document.getElementById("btntest").onclick = function () {
        window.location.href = "popup.html";
    };


</script>
  </head>
  <body>
  	<input id="btntest" type="button" value="Click me" />
  </body>
</html>


All other files (left untouched) can be found on the chrome extension getting started page: https://developer.ch...ions/getstarted

Is This A Good Question/Topic? 0
  • +

Replies To: Chrome-extension: Refresh popup.html to a new html page

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 04 May 2014 - 07:05 PM

Not quite sure what you are trying to do but you could be having a problem with permissions or resources. You have to tell chrome every thing you wish to access in the manifest.
Try adding the popup.html in the manifest in the array "web_accessible_resources". You need to add all extra resources you wish to use to that array, like .js files, image files, .html files, .css files. Basically anything that you are accessing from the extension directory and has not already been described in the manifest.json somewhere.
"web_accessible_resources":[
       "popup.html"
],


If you still are stuck go to chrome://extensions and then where your extension is click "Inspect views: background page" (or what ever page is available) That will bring up dev tools with access to the extension. Failing that try Dev tools->Sources then Content scripts in the panel on the left under sources. This may give you more of a clue as to what is happening. You can debug your script with the debugger.
Was This Post Helpful? 0
  • +
  • -

#3 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 04 May 2014 - 08:34 PM

I don't see Inspect views: background page on the extension page. Only reload and enable/disable the extension.

Basically what I'm trying to do is: originally, that kitten getting started tutorial, displays a bunch of kitten pictures when the extension icon is clicked. I wanted to test if redirecting worked in that small popup window, so I created a splash page that appears (instead of the popup when the icon is click). Once the user clicks on the button, they'll get redirected to the popup html page.

I just replaced "popup.html" in the manifest to splash (page that will redirect to popup). I tried what you suggested but that didn't work
Was This Post Helpful? 0
  • +
  • -

#4 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 04 May 2014 - 09:19 PM

Have you tried to just do a direct link.<a href='popup.html'>popup</a> That should work at bare minimum. your answer is just at the console if you can get to it. Try right clicking on the popup (your splash) and then inspect element. Do that after you have clicked the link and failed. Then go to the console and see if it says anything.

It could be that you dont have permission to run a script in that window and you may have to do it via the background script or a context script (context is easiest).

I will have to have look back at some code as I am a little rusty here
Was This Post Helpful? 0
  • +
  • -

#5 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 04 May 2014 - 09:29 PM

After a bit of reading. No inline scripts!!! you can not run the script there. Do what you need to do in a js file. Call it splash.js and link it in at the head.

Add a window.onload to start things off and then add your event listener to the button you want.

splash.js
window.onload = function(){
  document.getElementById("btntest").onclick = function () {
        window.location.href = "popup.html";
  }
}


This post has been edited by Blindman67: 04 May 2014 - 09:30 PM

Was This Post Helpful? 0
  • +
  • -

#6 masterori  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 27-January 14

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 05 May 2014 - 05:27 PM

Ah I see. Can you provide the link of where you read about no inline script?
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Re: Chrome-extension: Refresh popup.html to a new html page

Posted 05 May 2014 - 08:23 PM

https://developer.ch...urity-checklist

This will be where you see the new rules since the migration to v2 for the manifest.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1