CODEWITHSUNDEEP
jqueryinternet-explorerpluginsjavascript-frameworkcrossrider
user2564356
user2564356

Reputation: 785

how to set html page as popup in browser action in crossrider

Hi, I am creating a IE Extension using crossrider. In this extension i want to open a html page as popup by clicking the icon in the browser action. when i click the icon the html page is not getting popped up.

please help

In background.js

appAPI.ready(function($) 
{
  appAPI.browserAction.setResourceIcon('icon128.png');
  appAPI.browserAction.setTitle('Tax2290 Extension');
  appAPI.browserAction.setPopup({resourcePath:'index.html'});
});

In extension.js

appAPI.ready(function($) {
// Includes remote JS file into extension.js scope
 // Injects remote JS file into HTML page
 appAPI.dom.addRemoteJS('images/feed.js');
// Injects remote CSS file into HTML page
 appAPI.dom.addRemoteCSS('images/style.css');

});

Upvotes: 1

Views: 1139

Answers (1)

Shlomo
Shlomo

Reputation: 3753

Usually, appAPI.browserAction.setPopup works well in IE and I am not aware of any issues.

In general, you must make sure that the resources referenced (icon128.pnf, index.html, ...) are uploaded to the extension's resources folder and that the height and width mandatory properties are specified when calling the setPopup method.

Also, I'm not quite clear as to the significance of your code in the extension.js file, but if the intention is for them to be applied to the popup content, then you must define them in a crossriderMain function within your index.html file, as follows:

index.html:

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script type="text/javascript">
/************************************************************************************
  This is your Popup Code. The crossriderMain() code block will be run
  every time the popup is opened.

  For more information, see:
  http://docs.crossrider.com/#!/api/appAPI.browserAction-method-setPopup
*************************************************************************************/

function crossriderMain($) {
    // Place your code here (you can also define new functions above this scope)
    // The $ object is the jQuery object
    eval(appAPI.resources.get('images/feed.js'));
    appAPI.resources.includeCSS('images/style.css');
}
</script>
</head>
<body>
Hello World
</body>
</html>

If you require any further assistance with this, I will need to take a closer look at the code. Hence, please provide the extension id and I would be happy to investigate.

[Disclaimer: I am a Crossrider employee]

Upvotes: 1

Related Questions