Question

我正在尝试编写一个简单的Chrome扩展程序，以便从网站上获取平面信息，但我甚至无法从JQuery中获取on / click函数。

的manifest.json

{
  "manifest_version": 2,

  "name": "Flat",
  "description": "Adds flats to app",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
  ],
  "content_scripts": [
    {
      "matches": [
        "https://www.spareroom.co.uk/flatshare/flatshare_detail.pl*",
      ],
      "js": ["lib/jquery.min.js", "lib/bootstrap.min.js", "content.js"]
    }
  ]
}

content.js

$(document).ready(function () {
    console.log('Viewing flat');
    $("#hello").on("click", function () {
        console.log("Hello");
    });
    $("#hello").click(function () {
        console.log("hello");
    });
});

popup.html

<html>
<head>
    <title>Popup</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="content.js"></script>
</head>
<body>
    <div class="container">
        <button id="hello" class="btn btn-default">Add Flat</button>
    </div>
</body>
</html>

我不确定这里的问题是什么。 JQuery是3.2.1，Bootstrap是3.3.7。这里没有很多与JQuery相关的Chrome扩展程序问题。我找到了这个Chrome extensions with jQuery但我已经有文件就绪函数封装了其他代码。另外看了一下$(document).click() not working in chrome extension，但该解决方案没有利用JQuery点击/开启功能。

Answer 1

好吧所以这里的问题是我对每个JS文件运行的上下文和Chrome中的消息系统的误解。所以我将在下面概述我的代码的更改。可能有更好的方法，但这是我第一次开发Chrome扩展程序。

我修改了manifest.json，如下所示

<强>的manifest.json

...
"background": {
    "scripts": ["background.js"]
},
"content_scripts": {
  {
    ...
    "js": ["lib/jquery.min.js"]
  }
}

我添加了后台脚本，并将popup.html中使用的脚本更改为popup.js而不是content.js

popup.js如下所示。这是在popup.html上的扩展程序的上下文中运行，并向Chrome发送消息，以启动background.js中的处理程序

<强> popup.js

$(document).ready(function () {
    console.log('Viewing flat');
    $("#hello").click(clickHandler);
});

function clickHandler(e) {
     console.log('Adding flat');
     chrome.runtime.sendMessage({directive: "get-flat"}, function (response) {
        //
        console.log("handler", response);
    });
}

在background.js中，我使用chrome.runtime的onMessage事件API创建了一个侦听器。然后，这将调用在实际网页的上下文中执行脚本（chrome.tabs.executeScript）的content.js。信使听众与Redux w / React类似，因此非常有趣。我在这个问题Detect a button click in the browser_action form of a Google Chrome Extension

上找到了这种模式

<强> background.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
       switch (request.directive) {
           case "get-flat":
               chrome.tabs.executeScript(null, { file: "content.js" });
               sendResponse("in get-flat directive");
               break;
           case "process":
               console.log("process", request.data);
               break;
            default:
               break;
        }
    }
);

下一部分是content.js，它在网页的上下文中运行并抓取我关心的数据。然后，它会将该消息传递回background.js以进行进一步操作。为简洁起见，我简化了代码。

<强> content.js

function getFlat() {
    console.log("in getFlat");
    // Do stuff
    var val = $("#something").text();
    return val;
}
chrome.runtime.sendMessage({directive: "process", data: getFlat()});

我应该提一下，我认为JQuery在content.js中工作的唯一原因是因为我从中获取信息的网站也使用了JQuery。我不得不在background.js中的tabs.executeScript - passing parameters and using libraries?行中执行某些操作，将JQuery注入上下文中，以便content.js可以使用它，如果不是这样的话。

修改

^^这是错误的，因为我通过content_scripts的{{1}}部分注入JQuery

结束修改

无论哪种方式，我都能解决问题。我还将此用作参考Pass a parameter to a content script injected using chrome.tabs.executeScript()

如果有更好的方法可以随意发表评论。就像我说的那样，这是我第一次尝试使用Chrome扩展程序。

JQuery on / click功能在Chrome扩展程序中无效

1 个答案: