从 Chrome 扩展访问页面的选择器或 JQuery 实例

Question

我会尽量简单地解释一下。

我开发了一个 Chrome 扩展，但我在使用某些功能时遇到了问题。

我遇到的问题是我需要在扩展程序可以访问的网站上触发一些事件，但是一些在控制台上运行的脚本，如果从我的内容 js 执行，则不会以相同的方式工作Chrome 扩展（即使我使用自己的 jQuery 版本，如果需要我可以添加到我的扩展中）。

示例：

如果我在控制台上执行 window.$ 或 jQuery 它 returns ƒ (a,b){return new n.fn.init(a,b)}。如果我运行在我的脚本中，即使我等到所有内容都加载完毕，即使我在检查以确保所有内容都已加载之前设置等待 10 秒，它也会告诉我“$ is undefined”，当我我的 Chrome 分机上没有 jQuery。

此外，console.log(window.$.fn) 从控制台执行 returns Object [jquery: "1.12.4", selector: "", constructor: ƒ, toArray: ƒ, get: ƒ, …] 但是如果我运行从我的内容脚本中 jQuery 激活 returns Object [jquery: "3.5.0", constructor: ƒ, toArray: ƒ, get: ƒ, pushStack: ƒ, …] 因为我在扩展上安装了那个版本。

我需要这样做（它在控制台工作，而不是在扩展的内容脚本中工作）：

$("#id").val(123).val());
$("#id").trigger('keyup');

我也尝试过本机 .dispatchEvent() 方法来执行此操作但没有任何反应，它 returns true 在执行时但没有任何反应。

这就是我要问的原因：有没有办法从外部文件访问页面的 jQuery 实例（在本例中是 chrome 扩展名的 content.js 脚本）？

我可以更改 DOM 但这还不够，即使我出于某种原因更改了表单输入的值，页面也无法识别更改。我发现的唯一可行方法是在使用 jQuery 更改值后手动触发 keyup 事件，但只有在我从控制台执行此操作时才有效。

有线索吗？

Answer 1

按照@wOxxOm 的建议，我设法实现了我想要的。我将我以前的 js 文件添加为清单上的可访问文件：

"web_accessible_resources": ["cont.js"]

然后我添加了另一个内容脚本，以这种方式将我拥有的第一个内容加载到 DOM 中：

let url = chrome.runtime.getURL('cont.js');
$("head").first().append("<script src='" + url + "' type='text/javascript'></script>");

如果您 JSON.stringify 也可以从页面定义和访问变量：

let configData = {'obj1':1, 'obj2':2}
$("head").first().append(
    "<script type='text/javascript'>let config = " + JSON.stringify(configData) + "</script>"
);

从 Chrome 扩展访问页面的选择器或 JQuery 实例

Access page's selector or JQuery instance from a Chrome Extension

html

javascript

jquery

google-chrome-extension

jquery-events