Chrome扩展程序注入当前标签页

debugcn 发表于 Dev

StealthRT

您好，我正在创建一个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"
  ]
}

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

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

inject.JS：

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

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

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

有人可以在这里发现我的错误操作吗？

齐夫·阿德勒（Ziv Adler）

查看您的日志

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

要查看后台脚本日志，请转到：chrome：// extensions /启用开发人员模式切换在右上角点击“检查视图：后台页面”

代码修复

当我运行您的代码时，对我来说，问题是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});
}});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。