chrome插件问题，如何在chrome.tabs.executeScript引用的脚本文件内调用background.js内的变量

2021-04-04 05:45:01 1.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Chrome扩展MV3实战：掌握chrome.scripting API实现动态脚本注入在Web扩展开发领域，动态脚本注入是实现页面交互与内容修改的核心技术。其原理是通过扩展的API将JavaScript代码或CSS样式安全地注入到目标网页的上下文中执行，从而实现功能增强、数据采集或界面定制。这项技术的核心价值在于平衡了扩展能力与页面安全及性能，是现代浏览器扩展架构的关键组成部分。在Chrome扩展从Manifest V2向V3版本演进的过程中，谷歌引入了全新的chrome.scripting API，它取代了旧的executeScript方法，并与服务工作者（Service Worker）架阅读详情

以下是插件的background.js的相关内容，但是AutoFill.js内的代码不能访问background.js中的变量var_t，如何才能使调用的脚步文件可以访问var_t变量呢？

background.js：



var var_t = "Var变量";

chrome.contextMenus.create({

    title: "右键菜单",

    id: "1",

    onclick: function () {

        chrome.tabs.executeScript(null, { file: "js/AutoFill.js" });

    }

});

AutoFill.js：



alert(var_t);

这里仅仅为了演示用，只写了alert(var_t);运行时，chrome报错，var_t未定义。

...全文

Chrome插件开发入门与Manifest V3实战指南浏览器扩展开发是Web技术的重要应用领域，通过Chrome插件可以扩展浏览器功能或修改网页行为。其核心技术原理基于浏览器提供的扩展API体系，包括内容脚本注入、后台服务运行和安全的跨域通信机制。Manifest V3作为最新规范，引入了Service Worker替代传统后台页面，强化了安全限制，开发者需要掌握其配置要点。在工程实践中，合理设计插件架构、优化性能表现、确保跨版本兼容是关键挑战。本文以Chrome插件开发为例，详细解析Manifest V3配置、内容脚本注入等核心技术，并演示如何开发网页内容分阅读详情

huahuaxuwei

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

huahuaxuwei 2021-04-06

打赏
举报

谢谢

引用 10 楼泡泡鱼_ 的回复:

[quote=引用 9 楼 huahuaxuwei 的回复:]说啥了？被删了什么？

嗯，被删了。你可以试一下window.var_t='1'。然后看你的AutoFill.js中是否可以使用但建议，你使用它原本就支持的方式。你百度一下，关键词：chrome.tabs.executeScript 第一个结果你看看是不是能用。类似于这种问题，你应该先去百度或google。实在找不到解决方法再来问，省时间多了[/quote] 我上午问的问题解决了。把发送和监听事件调下个就好了，在background.js里监听，在AutoFill.js注入的脚本里发送消息就好了。至于为什么会每次都累计弹出，我就不去想了，有机会再去研究一下。起码现在的问题解决了。谢谢你！

huahuaxuwei 2021-04-06

打赏
举报

谢谢你，我这个问题解决了。我百度了一下，仔细看了一下，又参考了这个帖子https://blog.csdn.net/zhongping136/article/details/16869819。现在我知道怎么通过消息机制来传递参数了。我把background.js里面的代码改了一下： background.js主要内容：


var var_t = "Var变量";
chrome.contextMenus.create({
    //type :"radio",//单选框
    parentId: "1",
    title: "子菜单1",

    onclick: function () {
        getCurrentTabId((tabId) => {
            chrome.tabs.executeScript(tabId, {
                file: "js/AutoFill.js"
            }, function () {
                chrome.tabs.sendMessage(tabId, var_t, function (response) {
                    var_t = response
                    //alert(response);
                    alert("变量：" + var_t);
                });
            });
        });
    },
});

AutoFill.js：


chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    alert(message);
    sendResponse("调用后返回的变量");
});

这样，右键点击后，会触发alert(message);弹出"Var变量"，然后接着再弹出"调用后返回的变量"（执行alert("变量：" + var_t);）但是又来问题了，为什么我不更新插件，每点击一次右键菜单，它都累计弹出窗口呢？就是我加载插件后，第一次右键点击菜单，弹出一次对话框，再点击一次，就弹出2次，就好像说上一次的消息，还在消息队列中一样。

huahuaxuwei 2021-04-05

打赏
举报

谢谢，我那么定义不就是全局变量了么！

huahuaxuwei 2021-04-05

打赏
举报

我百度很久了，没找到相关内容，可能是我输入的关键词不对。关于chrome.tabs.executeScript，我觉得它就是属于动态注入吧！我在看一篇文章，这里提到了一些，不知道会不会有帮助，明天上班的时候我再去实践一下。

泡泡鱼_ 2021-04-05

打赏
举报

引用 2 楼 huahuaxuwei 的回复:

谢谢，我那么定义不就是全局变量了么！

问题是就你给的这些代码，根本无法分辨。但是你说的结果，就已经很明显它就不是全局变量呀

泡泡鱼_ 2021-04-05

打赏
举报

引用 9 楼 huahuaxuwei 的回复:

说啥了？被删了什么？

huahuaxuwei 2021-04-05

打赏
举报

说啥了？

被删了什么？

泡泡鱼_ 2021-04-05

打赏
举报

你在chrome插件问题，如何在chrome.tabs.executeScript引用的脚本文件内调用background.js内的变量的回帖已被管理员删除，原因是：审核不通过哪个管理员删的？我请问一下，什么原因导致的审核不通过？

huahuaxuwei 2021-04-05

打赏
举报

引用 3 楼泡泡鱼_的回复:

[quote=引用 2 楼 huahuaxuwei 的回复:]谢谢，我那么定义不就是全局变量了么！

问题是就你给的这些代码，根本无法分辨。但是你说的结果，就已经很明显它就不是全局变量呀 [/quote] 我觉得我这是跨域引用的问题吧！

huahuaxuwei 2021-04-05

打赏
举报

只要不是在function里面不都是全局变量么

huahuaxuwei 2021-04-05

打赏
举报

定义全局变量不就是var t就可以么！

泡泡鱼_ 2021-04-04

打赏
举报

AutoFill.js要访问var_t，你得保证var_t是全局变量

chrome插件问题，如何在chrome.tabs.executeScript引用的脚本文件内调用background.js内的变量

相关推荐