Crossover Extension Platform
I am creating an extension using Crossrider that allows users to bookmark the page they are viewing.
To this end, I created a popup that, when clicked, opens with a user interface to manage the bookmark list. When the user clicks the extension button, I want to pass the URL of the page being viewed to the popup to add it to the bookmark list. My problem is I don't know how to pass the url to the popup. Can anyone point me in the right direction?
The following snippet is a simplified version of the code to demonstrate what I have:
background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('images/icon.png');
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
});
popup.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">
function crossriderMain($) {
}
</script>
</head>
<body>
<h1>Bookmark List</h1>
<ul>
<li>1: http://example.com/1.html</html>
<li>2: http://example.com/2.html</html>
</ul>
</body>
</html>
source to share
The problem here is scope . The scope of the popup does not have access to the URL of the page being viewed; therefore, to get the url of a popup area, the popup code must request information from another area using messages .
The easiest way to do this is with a popup message to send a message to the active tab (Page Extension ) requesting the page url. You can achieve this in the following way, and I'll leave you the code to add a bookmark to the list.
extension.js
appAPI.ready(function($) {
// Listener to receive messages
appAPI.message.addListener(function(msg) {
// check if message is requesting page url and respond accordingly
if (msg.type==='get-url')
appAPI.message.toPopup({
url:encodeURIComponent(window.location.href);
});
});
// The rest of your code
...
});
popup.html
...
function crossriderMain($) {
// Listener to receive messages
appAPI.message.addListener(function(msg) {
// check if message contains a url and call function to process the url
if (msg.url) addBookmark(msg.url);
});
// Request url from active tab
appAPI.message.toActiveTab({
type: 'get-url';
});
function addBookmark(url) {
// Add your code that handles adding the url to the bookmark list
}
}
...
[ Disclosure : I am a Crossrider employee]
source to share