Chrome 扩展注入当前标签页
[英]Chrome Extension injecting into current tab page
问题描述
Hello all I am creating a Chrome Extension and I am having issues with injecting some JS into the page tab that the user is currently on.
大家好，我正在创建一个 Chrome 扩展程序，但在将一些 JS 注入用户当前所在的页面选项卡时遇到问题。
I have a popup.html/.js files and a button within that:我有一个 popup.html/.js 文件和一个按钮：
popup.HTML:弹出.HTML：
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/jquery.nok.min.css" />
<link rel="stylesheet" href="/css/materialize.min.css" />
<link rel="stylesheet" href="/css/messagebox.min.css" />
<link rel="stylesheet" href="/css/options.css" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/js/jQuery.js"></script>
<script src="/js/popup.js"></script>
<script src="/js/inject.js"></script>
<script src="/js/loadingoverlay.min.js"></script>
<script src="/js/jquery.nok.min.js"></script>
<script src="/js/content.js"></script>
</head>
<body style="width: 335px; height: 55px;">
<div class="btn" id="injectIT_">Submit</div>
</body>
</html>
popup.JS:弹出.JS：
document.addEventListener('DOMContentLoaded', function (dcle) {
$("#injectIT_").click(function() {
callInject();
});
});
Manifest.json:清单.json：
{
"name" : "Blah Extention",
"version" : "11.17.2020",
"manifest_version" : 2,
"author" : "David",
"description" : "Blah Extention",
"options_page" : "/html/options.html",
"offline_enabled" : true,
"options_ui" : {
"page" : "/html/options.html",
"chrome_style" : true,
"open_in_tab" : true
},
"icons" : {
"16" : "/img/16j.png",
"48" : "/img/48j.png",
"128" : "/img/128j.png"
},
"background" : {
"scripts" : [ "/js/jQuery.js", "/js/background.js" ],
"persistent" : false
},
"browser_action" : {
"default_icon" : "/img/16jD.png",
"default_popup" : "/html/popup.html",
"default_title" : "Push this to start"
},
"web_accessible_resources" : [ "/img/*", "/js/*", "/css/*", "/html/*" ],
"content_scripts" : [ {
"matches" : [ "http://*/*", "https://*/*" ],
"all_frames" : true,
"run_at" : "document_idle",
"css" : [ "/css/messagebox.min.css", "/css/jquery.nok.min.css" ],
"js" : [ "/js/jQuery.js", "/js/content.js", "/js/messagebox.min.js",
"/js/jquery.nok.min.js", "/js/loadingoverlay.min.js", "/js/popup.js" ]
} ],
"content_security_policy" : "script-src 'self' 'unsafe-eval'; object-src 'self';",
"permissions" : ["http://*/", "https://*/", "file:///*/*", "storage", "tabs", "declarativeContent", "activeTab", "debugger", "downloads", "notifications", "unlimitedStorage", "contextMenus", "cookies", "webRequestBlocking", "nativeMessaging", "identity", "clipboardWrite"
]
}
background.JS:背景.JS：
...[more js code here]
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if(request.message == 'Test')
console.log('Got message');
chrome.tabs.executeScript(null, { file: "/js/inject.js" }, function() {
console.log("injected!");
});
});
...[more js code here]
content.JS:内容.JS：
chrome.runtime.sendMessage({ "message": "Test" });
inject.JS:注入.JS：
function callInject() {
var t = "14774123",
a = "qtest",
l = "Rule",
...[more js code here]
};
When I click on the icon and the popup shows I hit the button.当我点击图标并且弹出窗口显示我点击了按钮。 Nothing happens an there are no errors.什么都没有发生，也没有错误。
What I am wanting it to do is inject the JS into that current page and proceed with the js function that's inside the inject.js file.我想要它做的是将 JS 注入当前页面并继续使用 inject.js 文件中的 js function。
Can anyone spot what I am doing incorrectly here?谁能发现我在这里做错了什么？
1 个解决方案
解决方案1
1 已采纳 2020-12-03 21:27:42
review your logs查看您的日志
when you are saying no errors.. you might only looked into the DOM logs but you can also get the background script logs too which will show you your errors.当您说没有错误时..您可能只查看了 DOM 日志，但您也可以获取后台脚本日志，这将显示您的错误。
to review the background script logs, go to: chrome://extensions/ enable developer mode toggle in the top right corner hit the "inspect views: background page"查看后台脚本日志，go 到：chrome://extensions/ 在右上角启用开发人员模式切换点击“检查视图：背景页面”
code fixes代码修复
when I run your code, the issue for me was the "null" parameter in the chrome.tabs.executeScript function, the null is for the activetab but when you load the extension from the chrome://extensions/ the activetab at that moment of time is actually the chrome://extensions/当我运行您的代码时，对我来说，问题是 chrome.tabs.executeScript function 中的“null”参数，null 用于 activetab 但是当您从 chrome://extensions/ 加载扩展时时间实际上是 chrome://extensions/
to solve this I looped through all the tabs and looked into the tab that has the url popup.html and only injected to that tab.为了解决这个问题，我遍历了所有选项卡并查看了具有 url 弹出窗口的选项卡。html 并仅注入到该选项卡。 did you check both the DOM logs and the background page logs?您是否同时检查了 DOM 日志和后台页面日志？
manifest.json manifest.json
{
"name" : "Blah Extension",
"version" : "11.17.2020",
"manifest_version" : 2,
"author" : "David",
"description" : "Blah Extension",
"options_ui" : {
"chrome_style" : true,
"open_in_tab" : true
},
"background" : {
"scripts" : [ "js/background.js" ],
"persistent" : false
},
"browser_action" : {
"default_title" : "Push this to start"
},
"content_scripts" : [
{
"matches" : [ "http://*/*", "https://*/*", "file://*/*" ],
"all_frames" : true,
"run_at" : "document_end",
"js" : [ "js/content.js", "js/inject.js" ]
}
],
"permissions" : [
"<all_urls>",
"tabs"
]
}
js/background.js js/background.js
chrome.tabs.query({}, function(tabs) {
for (var i=0; i<tabs.length; ++i) {
console.log(tabs[i].url);
if (tabs[i].url.indexOf("popup.html") > 0)
chrome.tabs.executeScript(tabs[i].id, {file: "js/inject.js", allFrames: true});
}});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.