Chrome 扩展中内容脚本的未定义响应

2023-11-25

我无法从我的内容脚本获得响应以显示在我的 popup.html 中。当此代码运行并单击查找按钮时,“Hello from response!”打印,但变量响应被打印为未定义。最终目标是将当前选项卡的 DOM 放入我的脚本文件中,以便我可以解析它。我正在使用内容脚本的单一时间消息来获取 DOM,但它没有被返回并且显示为未定义。我正在寻找任何可能的帮助。谢谢。

弹出.html:

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

        <form >
            Find: <input id="find" type="text"> </input>
        </form>
        <button id="find_button"> Find </button>
    </body>
</html>

清单.json:

{
    "name": "Enhanced Find",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Ctrl+F, but better",
    "browser_action": {
        "default_icon": "icon.png", 
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "*://*/*"
    ],

    "background":{
        "scripts": ["script.js"],
        "persistent": true
    },

    "content_scripts":[
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["content_script.js"],
            "run_at": "document_end"
        }
   ]
}

脚本.js:

var bkg = chrome.extension.getBackgroundPage();


function eventHandler(){
    var input = document.getElementById("find");
    var text = input.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        var tab = tabs[0];
        var url = tab.url;
        chrome.tabs.sendMessage(tab.id, {method: "getDocuments"}, function(response){
            bkg.console.log("Hello from response!");
            bkg.console.log(response);
        });

    });
}

内容脚本.js:

var bkg = chrome.extension.getBackgroundPage();

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if(request.method == "getDOM"){
        sendResponse({data : bkg.document});
    }else{
        sendResponse({});
    }
});

您的代码存在很多问题(请参阅上面我的评论)。


首先是一些建议/考虑因素:

  • 不要将您的内容脚本注入all网页。以编程方式注入并且仅当用户想要搜索时。

  • 在内容脚本中进行“搜索”可能是一个更好的主意,您可以直接访问 DOM 并可以对其进行操作(例如突出显示搜索结果等)。如果您采用这种方法,您可能需要调整您的权限,但始终尝试将它们保持在最低限度(例如,不要使用tabs where activeTab就足够了,等等)。

  • 请记住,一旦弹出窗口关闭/隐藏(例如选项卡获得焦点),在弹出窗口上下文中执行的所有 JS 都会中止。

  • 如果您想要某种持久性(即使是暂时的),例如记住最近的结果或最后的搜索词,您可以使用类似的东西铬存储 or 本地存储.


最后,来自我的扩展演示版本的示例代码:

扩展文件组织:

          extension-root-directory/
           |
           |_____fg/
           |      |_____content.js
           |
           |_____popup/
           |      |_____popup.html
           |      |_____popup.js
           |
           |_____manifest.json

清单.json:

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": true,

    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js":     ["fg/content.js"],
            "run_at": "document_end",
        }
    ],

    "browser_action": {
        "default_title": "Test Extension",
        "default_popup": "popup/popup.html"
    }
}

内容.js:

// Listen for message...
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // If the request asks for the DOM content...
    if (request.method && (request.method === "getDOM")) {
        // ...send back the content of the <html> element
        // (Note: You can't send back the current '#document',
        //  because it is recognised as a circular object and 
        //  cannot be converted to a JSON string.)
        var html = document.all[0];
        sendResponse({ "htmlContent": html.innerHTML });
    }
});

弹出.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="popup.js"></script>
    </head>
    <body>
        Search:
        <input type="text" id="search" />
        <input type="button" id="searchBtn" value=" Find "
               style="width:100%;" />
    </body>
</html>

弹出.js:

window.addEventListener("DOMContentLoaded", function() {
    var inp = document.getElementById("search");
    var btn = document.getElementById("searchBtn");

    btn.addEventListener("click", function() {
        var searchTerm = inp.value;
        if (!inp.value) {
            alert("Please, enter a term to search for !");
        } else {
            // Get the active tab
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, function(tabs) {
                // If there is an active tab...
                if (tabs.length > 0) {
                    // ...send a message requesting the DOM...
                    chrome.tabs.sendMessage(tabs[0].id, {
                        method: "getDOM"
                    }, function(response) {
                        if (chrome.runtime.lastError) {
                            // An error occurred :(
                            console.log("ERROR: ", chrome.runtime.lastError);
                        } else {
                            // Do something useful with the HTML content
                            console.log([
                                "<html>", 
                                response.htmlContent, 
                                "</html>"
                            ].join("\n"));
                        }
                    });
                }
            });
        }
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chrome 扩展中内容脚本的未定义响应 的相关文章

随机推荐

  • 为什么 Tensorflow-gpu 仍然使用 cpu

    我在后端使用带有tensorflow gpu的Keras 我没有安装tensorflow CPU版本 所有输出都显示选择了GPU 但tf正在使用CPU和系统内存 当我运行代码时 输 出是 输出代码 我什至运行了 device lib lis
  • 使用 matlabpool 时出错 - 未定义函数“distcomp.fileserializer”

    我正在尝试使用 MATLAB 中的并行计算工具箱来帮助加速我正在执行的一些密集计算 在我可以使用像这样的结构之前parfor 我需要通过创建一个工人池matlabpool 首先 我只想使用默认的 local只需调用即可配置文件matlabp
  • 应用程序沙盒/iCloud 和 Snow Leopard 向后兼容性

    到目前为止 所有 Mac App Store 开发人员都知道 所有应用程序都必须启用新的 OSX Lion Sandboxing 对于现有应用程序 我们必须在 XCode 4 2 中启用它并设置数据迁移 plist 因此 我现有的 Mac
  • Java 中“new”关键字的实际作用是什么?我应该避免创建新对象吗?

    我不久前注册了 尽管自从我开始自学计算机编程以来 我一直在充分利用这个网站 我一直在自学计算机编程 并认为这是我的一个小爱好 我确实查找过类似的问题 但事实上我找不到我正在寻找的答案 现在 请注意 在 Java 这是我建议开始使用的语言 中
  • 使用 package.json 全局和本地安装依赖项

    使用 npm 我们可以使用以下命令全局安装模块 g选项 我们如何在 package json 文件中执行此操作 假设 这些是我在 package json 文件中的依赖项 dependencies mongoose 1 4 0 node i
  • 日期字段在验证时给出所需的错误

    我在我的 asp net MVC 3 网站中创建了一个模型 并有一个名为 DateOpened 的属性 Column Date Opened Display Name Date Opened DataType DataType Date D
  • Android Fragment 导航和 Backstack

    我有一个标题栏 有点像菜单 和 4 个片段 MAIN A B C 其中 MAIN 应该是用于 backstack 的 main root 片段 我遇到的问题是当用户通过菜单进入例如 MAIN gt A gt B gt C 时 如果我只是使用
  • Android Studio 无法找到有效的 Jvm(与 MAC OS 相关)

    我无法在 Mac OS 10 10 1 Yosemite 上启动 Android Studio 进行 Android 开发 打开应用程序包安卓工作室在 Finder 中 然后编辑信息表文件 更改关键 JVM 版本 将 1 6 改为 1 6
  • CMake:如何为头文件设置COMPILE_FLAGS?

    我已经成功使用CMake构建了共享库 但大小不太好 我已经尝试过几个编译标志来减少大小等 set source files properties TARGET SOURCE FILES PROPERTIES COMPILE FLAGS fe
  • 当 import_array 不在同一翻译单元中时出现段错误

    我在正确初始化 NumPy C API 时遇到问题 我想我已经将问题与调用隔离了import array来自不同的翻译单位 但我不知道为什么这很重要 最小工作示例 header1 hpp ifndef HEADER1 HPP define
  • 将 WAR 文件部署到 Jboss EAP 6.0(在 JBOSS AS 7.1 下工作)时出错

    我们正在开发使用 Jboss Spring 和 Hibernate 构建的新系统 目前我们正在从 AS 7 1 迁移到 EAP 6 0 由于我们未知的原因 部署到 EAP 6 0 服务器时部署失败 但在 AS 7 1 下工作得很好 在我们的
  • 我可以使用 Google Visualization API 在应用脚本中查询电子表格吗?

    我有一个包含大约 3000 行数据 大约 30 列 的 Google 电子表格 数据以标准方式布局 包含列标题和每个数据项一行 这些数据代表各种学术课程中使用的案例研究和文章 并且数据集始终在增长 我需要根据指定的参数搜索 查询数据 例如
  • Meteor template.find 未定义

    我正在尝试使用template find让我的生活更轻松 但在 javascript 控制台中我得到 undefined is not a function 这就是我所拥有的 它被绊倒了template find Template supe
  • 我们可以在 perl 脚本中获取 shell 脚本吗

    我们可以在 perl 脚本中获取 shell 脚本吗 例子 方案一 cat test1 sh bin ksh DATE bin date 方案2 cat test2 sh bin ksh test1 sh echo DATE 方案3 cat
  • 为什么 printf 对浮点数进行四舍五入?

    我正在尝试使用打印一些浮点数printf 例如 int main printf 1f 76 75 return 0 Output 76 8 我对结果有一些疑问 首先 为什么没有打印出来76 7 其次 这个数字是如何四舍五入的 C99 7 1
  • 在 apply 内使用 ifelse

    我试图在数据集中创建一个新列 根据预先存在的列的输入 为每一行提供一个输出 在此输出列中 我希望 NA if给定行中的任何输入值都是 0 否则 如果没有一个输入为 0 我希望该行的输出是输入的唯一值的数量 我认为解决方案将使用ifelse嵌
  • 更改 JAX-WS 服务 URL

    创建 JAX WS Web 服务时是否可以更改 Web 服务 URL 自动 URL 为 在 Glassfish 3 上 http
  • Xcode Instruments 错误:“分配跟踪库未及时加载”

    安装 Xcode5 包时出现问题 我正在使用 Mavericks 不确定这是否相关 Cannot profile allocations in simulator Instruments would load and start app i
  • 如何在JavaScript中将文件转换为base64?

    UPDTypeScript 版本也可以在答案中找到 现在我通过这一行获取 File 对象 file document querySelector files gt input type file files 0 我需要通过 json 以 B
  • Chrome 扩展中内容脚本的未定义响应

    我无法从我的内容脚本获得响应以显示在我的 popup html 中 当此代码运行并单击查找按钮时 Hello from response 打印 但变量响应被打印为未定义 最终目标是将当前选项卡的 DOM 放入我的脚本文件中 以便我可以解析它