Javascript 横向扩展平台
我正在使用Crossrider创建一个扩展,允许用户将他们正在查看的页面添加到书签中 为此,我创建了一个按钮弹出窗口,当单击该按钮时,将打开用于管理书签列表的UI。当用户单击扩展按钮时,我希望将正在查看的页面的URL传递到弹出窗口,以便将其添加到书签列表中。我的问题是,我不知道如何将URL传递到弹出窗口。谁能给我指出正确的方向吗 以下代码片段是代码的简化版本,用于演示我所拥有的内容: background.js:Javascript 横向扩展平台,javascript,api,cross-browser,browser-extension,crossrider,Javascript,Api,Cross Browser,Browser Extension,Crossrider,我正在使用Crossrider创建一个扩展,允许用户将他们正在查看的页面添加到书签中 为此,我创建了一个按钮弹出窗口,当单击该按钮时,将打开用于管理书签列表的UI。当用户单击扩展按钮时,我希望将正在查看的页面的URL传递到弹出窗口,以便将其添加到书签列表中。我的问题是,我不知道如何将URL传递到弹出窗口。谁能给我指出正确的方向吗 以下代码片段是代码的简化版本,用于演示我所拥有的内容: background.js: appAPI.ready(function($) { appAPI.bro
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>
函数crossriderMain($){
}
书签列表
- 1:http://example.com/1.html
- 2:http://example.com/2.html
这里的问题是。弹出窗口运行的范围无法访问正在查看的页面的URL;因此,要获得弹出作用域的URL,弹出代码必须通过从另一个作用域请求信息
最简单的方法是弹出窗口向活动选项卡()发送一条消息,请求它显示的页面的URL。您可以按如下方式实现这一点,我将让您自行编写代码,将书签添加到列表中
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
...
});
...
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
}
}
...
popup.html:
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
...
});
...
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
}
}
...
[披露:我是一名交叉骑手员工]