從 Chrome 擴展程序訪問頁面的選擇器或 JQuery 實例

Question

我會盡量簡單地解釋一下。

我開發了一個 Chrome 擴展程序，但我在某些功能上遇到了問題。

我遇到的問題是我需要在擴展程序可以訪問的網站上觸發一些事件，但是一些在控制台上工作的腳本，如果從我的 Chrome 擴展程序的內容 js 執行，則不能以相同的方式工作（即使我使用我自己的 jQuery 版本，如果需要，我可以添加到我的擴展中）。

例子：

如果我在控制台上執行window.$或 jQuery 它會返回ƒ (a,b){return new n.fn.init(a,b)} 。 如果我在我的腳本上運行它，即使我等到所有內容都加載完畢，即使我在檢查以確保所有內容都已加載之前設置了 10 秒的等待時間，它也會告訴我“$ 未定義”當我沒有jQuery 在我的 Chrome 擴展程序上。

此外，從控制台執行的console.log(window.$.fn)返回Object [jquery: "1.12.4", selector: "", constructor: ƒ, toArray: ƒ, get: ƒ, …]但如果我運行從我的激活 jQuery 的內容腳本中返回Object [jquery: "3.5.0", constructor: ƒ, toArray: ƒ, get: ƒ, pushStack: ƒ, …]因為我在擴展上安裝了該版本。

我需要這樣做（它可以從控制台工作，但不能從擴展的內容腳本中工作）：

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

我也嘗試過本地的.dispatchEvent()方法，但沒有任何反應，它在執行時返回true ，但沒有任何反應。

這就是我要問的原因：有沒有辦法從外部文件（在本例中是我的 chrome 擴展的content.js腳本）訪問頁面的 jQuery 實例？

我可以更改 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>"
);