Opening remark: I checked provided extension ID and the background.js file is empty, so I presume you are working locally and have not uploaded your latest code. Hence, I am answering based upon the code provided in this thread and generically in terms of how popups work.
First allow me summarize what I understand from your question:
- You want to add a button to your extension, which when clicked opens a popup with HTML from your resources
- You want to use jQuery to customize the popup HTML with remote content depending on the URL of the active tab
To implement this scenario, you must to work in 3 scopes (extension page, background, and popup) and use messaging to communicate between them. Hence, you can achieve your goal as follows:
1) In the background scope, set up your browser button to open a popup. [NOTE: You cannot configure a button to be use both an onClick handler and a popup at the same time. For more information, see the the notes in appAPI.browserAction]
background.js:
appAPI.ready(function ($){
// Create popup browser button
appAPI.browserAction.setResourceIcon('icon.png');
appAPI.browserAction.setPopup({
resourcePath: 'terms.html',
height: 930,
width: 455
});
});
2) In the popup scope, send a message to the extesnsion scope to get the page URL and when the resonse is received, make the request for the remote content and inject it into the HTML via jQuery. NOTE: You can only directly modify popup HTML in the popup scope.
terms.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
// Listen for response from active tab
appAPI.message.addListener(function(msg) {
// If response is the page URL
if (msg.type === 'setPageUrl') {
// make request to remote server for content with the page URL as a param
appAPI.request.get({
url: 'http://example.com?url=' + msg.url,
onSuccess: function (response, additionalInfo){
// Convert received JSON string to object
var responseObj = appAPI.JSON.parse(response);
// Clear loading message
$('#remote-content').text('');
// add content to popup HTML
$(responseObj.html).prependTo('#remote-content');
}
});
}
});
// Request page URL from active tab
appAPI.message.toActiveTab({type: 'getPageUrl'});
}
</script>
</head>
<body>
<div id='remote-content'>Loading ...</div>
</body>
</html>
3) In the extension scope, handle requests for the page URL
extension.js:
appAPI.ready(function ($){
// Listen for request for page URL
appAPI.message.addListener(function(msg) {
// Send page URL to popup
appAPI.message.toPopup({
type: 'setPageUrl',
url: encodeURIComponent(location.href)
});
});
});
If you have any specific requests that you wish to keep private, please feel free to contact Crossrider support (support@crossrider.com).
[Disclaimer: I am a Crossrider employee]