Chrome 扩展注入当前标签页答案

【问题标题】：Chrome Extension injecting into current tab pageChrome 扩展注入当前标签页
【发布时间】：2020-12-03 21:00:37
【问题描述】：

大家好，我正在创建一个 Chrome 扩展程序，但在将一些 JS 注入用户当前所在的页面选项卡时遇到问题。

我有一个 popup.html/.js 文件和一个按钮：

popup.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：

document.addEventListener('DOMContentLoaded', function (dcle) {
    $("#injectIT_").click(function() {
        callInject();
    }); 
});

Manifest.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"
  ]
}

背景.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]

内容.JS：

chrome.runtime.sendMessage({ "message": "Test" });

注入.JS：

function callInject() {
    var t       = "14774123",
        a       = "qtest",
        l       = "Rule",
    ...[more js code here]
};

当我点击图标并且弹出窗口显示我点击了按钮。没有任何反应，没有错误。

我希望它做的是将 JS 注入到当前页面并继续执行 inject.js 文件中的 js 函数。

谁能发现我在这里做错了什么？

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

查看您的日志

当你说没有错误时.. 您可能只查看了 DOM 日志但您也可以获取后台脚本日志这将向您显示您的错误。

要查看后台脚本日志，请转到：铬：//扩展/ 在右上角启用开发者模式切换点击“检查视图：背景页面”

代码修复

当我运行你的代码时，对我来说问题是 chrome.tabs.executeScript 函数中的“null”参数，null 用于 activetab 但是当你从 chrome://extensions/ 加载扩展时那个时候的activetab实际上是chrome://extensions/

为了解决这个问题，我遍历了所有选项卡并查看了具有 url popup.html 并且仅注入到该选项卡的选项卡。你检查了 DOM 日志和后台页面日志吗？

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

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});
}});

【讨论】：

感谢 Ziv 的回复。你能提供一个直观的例子吗？
嗨 @StealthRT 看看我修改后的回答，如果您需要更多帮助，请告诉我......如果它解决了您的问题