个人中心
gpt4 book ai didi

javascript - 在弹出窗口中显示当前 URL - Safari 扩展

转载 作者：太空宇宙 更新时间：2023-11-04 16:03:50 25 4
gpt4 key购买 nike

我正在尝试创建一个非常基本的 Safari 扩展，一旦您单击工具栏图标，它就会在弹出窗口中显示当前选项卡的 URL。

到目前为止我有以下代码:

global.html:

<!doctype html>
<html>
  <head>
      <script src="global.js"></script>
  </head>
  <body>
  </body>
</html>

global.js:

function getCurrentURL() {
    return safari.application.activeBrowserWindow.activeTab.url;
}

popover.html:

<!doctype html>
<html>
  <head>
      <script src="popover.js"></script>
  </head>
  <body>
    <div class="bodyContainer" id="status"></div>
  </body>
</html>

popover.js

var main = function() {
    var currentURL = safari.extension.globalPage.contentWindow.getCurrentURL();
    console.debug("TTLogs: Current URL in Popover: " + currentURL);
    modifyBody(currentURL);
};

var modifyBody = function(link) {
    var body = document.getElementById("status");
    body.innerHTML = "Hello world. Link is " + link; // I get error here. body is returned as null.
};

main();

我想要的是，当我单击弹出窗口图标时，我希望弹出窗口显示“Hello world。链接是”。

实际发生的情况是，当我在控制台中单击弹出窗口图标时，我看到我获得了正确的 URL，但是，我收到了错误:

[Error] TypeError: null is not an object (evaluating 'body.innerHTML = "Hello world. Link is " + link')modifyBody (popover.js:9)

扩展的想法是，当我单击弹出窗口时，它需要:

  1. 获取当前选项卡的 URL。
  2. 对其进行一些魔法分析。
  3. 动态地在 popover.html 中显示结果(通过 DOM 操作)。

我在这里缺少什么？

编辑我解决了它。我想要的预期流程是:

  1. 调用 global.js 以捕获页面的 URL
  2. 等待 global.js 的响应
  3. 收到响应后，使用 URL 更新 popover.html

实际发生的流程是:

  1. 调用 global.js 以捕获页面的 URL
  2. 立即使用空内容调用 modifyBody() (因为我们尚未收到来自 global.js 的响应)。所以页面保持空白。
  3. 终于收到来自 global.js 的回复 - 但现在为时已晚。

为了解决这个问题，我有多种选择。几个选项是:

  1. 一旦我们收到来自 global.js 的响应，就使用 Promise 等待更新 popover.html

  2. 或者，创建一个 popoverHandler 并将其添加到事件监听器，如下所示:

    safari.application.addEventListener("popover", popoverHandler, true);

当您单击工具栏项和显示弹出窗口时，将立即调用此函数。

所以代码如下所示:

var popoverHandler = function(event) {
    console.debug("Opening popup. Identifier");
    var currentURL = safari.extension.globalPage.contentWindow.getURL();
    // update my page.html here.
};

您还可以在 global.js 中注册 "activate"、"open" 或 "navigate" 处理程序> - 然后调用 popover.js 更新 html 函数，一旦这些函数被触发。

希望这有帮助。

最佳答案

您正在尝试从全局页面内访问实际页面上下文 - 我猜 Safari 会阻止您这样做。您可以从栏和弹出窗口访问全局页面，但不能从实际页面访问。

使用消息传递，参见例如Support Logic for Injected Scripts在扩展教程中。您需要两个简单的函数来询问 URL 并返回其值。

关于javascript - 在弹出窗口中显示当前 URL - Safari 扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42056268/

25 4 0
文章推荐： javascript - Ionic2:如何包含信号器？
文章推荐： c++ - Eigen :应用元素明智的绝对或幂函数
文章推荐： javascript - 获取矩形内的地点谷歌地图
文章推荐： c++ - SDL2 程序仅在使用 SDL_RENDERER_SOFTWARE 创建渲染器时才有效
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com