Question

我必须在访问过的网页上调用javascript函数（我知道存在），从Chrome Extension browser_action图标点击？

我已经阅读了几个与调用页面函数相关的答案，但不确定我是否已经看到任何可以通过图标点击调用的答案。

browser_action单击是通过background.js的事件处理程序chrome.browserAction.onClicked.addListener处理的。从那里我通过sendMessage调用内容脚本函数。但是在内容脚本中，我无法访问调用页面功能，尽管可以访问DOM。

的manifest.json

{
  "manifest_version": 2,

  "name": "Page Inspector",
  "description": "blah",
  "version": "1.0",
  "browser_action": {
    "default_icon": "img/icon.png",
    "name": "Click to Inspect"
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": [ "https://MYURL/*" ],
      "js": [ "content.js" ]
    }
  ],
  "web_accessible_resources": [
    "inspector.js"
  ]
}

background.js

logOnSuccess = function () {
  console.log("inspected successfully");
}

chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
  console.log(document.title);
  /*...check the URL of the active tab against our pattern and... */
  if (tab.url.indexOf("/MYURL") != -1) { // Inspect whether the place where user clicked matches with our list of URL
    /* ...if it matches, send a message specifying a callback too */
    chrome.tabs.sendMessage(tab.id, { text: "inspect" }, logOnSuccess);
  }
});

content.js

// inject the main inspector.js script in to the page
var scriptEl = document.createElement('script');
scriptEl.src = chrome.extension.getURL('inspector.js');
scriptEl.addEventListener('load', null, false);
document.head.appendChild(scriptEl);

/* Listen for messages */
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  /* If the received message has the expected format... */
  if (msg.text && (msg.text == "inspect")) {
    /* Call the specified callback, passing 
       the web-pages DOM content as argument */
    //alert("From Inpector : " + document.title);
    window.inspectPage();
  }
});

inspector.js

window.inspectPage = function () { 
$("input[FieldName='FIRSTNAME']").css("background-color", "lightblue");
    }

因此，当从backgroud.js点击图标按钮时，我希望能够调用页面上的inspectPage函数（因为它被注入到访问过的网页中）。使用上面的代码，我得到一个运行时错误 - inspectPage未定义。

无论如何要解决这个问题？

Answer 1

你是对的，无法在网页上调用javascript功能，但你可以在DOM中连接网页。（如果是您的网页，您可以使用chrome.runtime功能在扩展程序和网页之间发送消息）。

在浏览器图标上点击Chrome扩展程序页面上的呼叫功能

1 个答案: