gpt4 book ai didi

javascript - Crossrider 扩展平台

转载 作者:行者123 更新时间:2023-11-29 10:43:02 24 4
gpt4 key购买 nike

我正在使用 Crossrider 创建一个扩展程序,允许用户为他们正在查看的页面添加书签。

为此,我创建了一个按钮弹出窗口,单击该按钮将打开用于管理书签列表的 UI。当用户单击扩展程序的按钮时,我想将正在查看的页面的 URL 传递给弹出窗口,以便我可以将其添加到书签列表中。我的问题是我不知道如何将 URL 传递给弹出窗口。谁能指出我正确的方向?

以下代码片段是代码的简化版本,用于演示我所拥有的内容:

背景.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>

最佳答案

这里的问题是scope .弹出窗口运行的范围无权访问正在查看的页面的 URL;因此,要获取弹出范围的 URL,弹出代码必须通过 messaging 从另一个范围请求信息。 .

执行此操作的最简单方法是让弹出窗口向事件选项卡 (Extension Page Scope) 发送一条消息,请求其显示的页面的 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
...
});

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
}
}
...

[披露:我是 Crossrider 员工]

关于javascript - Crossrider 扩展平台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25102601/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com