Question

我只是在思考chrome扩展是否可以用这个用例。

我已经加载了一个网页。其上有一些HTML代码（我的意思是网页本身也显示了一些HTML代码）

喜欢这张图片。

Webpage

这个维基百科包含一些HTML。我可以从html的正则表达式中提取到/ html

我想构建一个chrome扩展，可以在页面上使用这个html代码（我知道如何通过正则表达式提取它）并将其显示在扩展弹出窗口中。这就像在弹出窗口中调用浏览器本身一样。

从我可以开始的地方欢迎一些链接的建议。

可以这样做。

更新

re.js

chrome.tabs.query( {
    active: true,
    lastFocusedWindow: true
},

function getHTML(document){
    var test = document_r.body;
    var text = test.textContent;
    var bodyStart="<BODY";
    var bodyEnd="</BODY>"
    var regex = bodyStart +"(.*?)"+ bodyEnd;
    var regexg = new RegExp(regex, "g");
    match = regexg.exec(text);
    return match;
}

function(array_of_Tabs,document) {
    var tab = array_of_Tabs[0];
    //tab.url; - url of the active tab
    getHTML(document);
    chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage();"});
});

chrome.runtime.onMessage.addListener(function(request,document) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

好的也许我可以在函数中调用getHTML（array_of_tabs，document）我有包含html代码的正则表达式字符串。现在我如何在弹出窗口中运行HMTL代码。

Answer 1

我找到了你。显然，您想要解析当前页面的HTML代码以查找内部的一些HTML示例。只需修改我的代码。您需要将getHTML()函数中的所有JavaScript放入executeString()调用内的字符串中。这种方式很奇怪，但executeString()调用中的字符串是在打开的页面的HTML中运行的代码（当你在里面时你可以得到任何内部HTML），所以你应该使用它。在我的代码中进行了一些更改后，弹出窗口显示所有<p>个元素都显示为红色的页面（例如，您可以获取HTML代码并对其进行修改;在您的情况下，您根据正则表达式匹配来剪切HTML结果而不是使文字变红：）

popup.js：

chrome.tabs.query( {
  active: true,
  lastFocusedWindow: true
},
function(array_of_Tabs) {
  var tab = array_of_Tabs[0];
  //tab.url; - url of the active tab

  chrome.tabs.executeScript(tab.id, {code: "var match = document.getElementsByTagName('html')[0].innerHTML + '<style>p{color:red}</style>'; chrome.runtime.sendMessage(match);"});
});

chrome.runtime.onMessage.addListener(function(request) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

您可以根据正常表达式中的内容更改该字符串中的JavaScript代码。关键是你必须使用getHTML()在你注入的字符串中编写executeString()算法。这有点奇怪，但这就是你在打开的页面代码中执行某些东西的方式，你需要它来访问它的代码。它只留给你处理你的正则表达式逻辑。我想这可以回答你关于如何在当前打开的选项卡代码中调用一些JavaScript算法并向你的弹出窗口发送内容的直接问题。

Answer 2

是的，你可以这样做。这种情况没有问题。您需要使用chrome.tabs.query（）获取当前选项卡ID，然后在该选项卡中执行JavaScript代码（弹出），最后从该选项卡（在JavaScript弹出期间）向弹出窗口发送运行时消息，以将其HTML代码替换为收到代码。我刚刚创建了一个示例扩展来说明：

的manifest.json：

{
  "name": "HTML opener",
  "description": "Open the current page in popup window",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "HTML opener",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html：

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>    
    <style>
      body {
        min-width: 300px;
        overflow-x: hidden;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js：

chrome.tabs.query( {
    active: true,
    lastFocusedWindow: true
},
function(array_of_Tabs) {
    var tab = array_of_Tabs[0];
    //tab.url; - url of the active tab

    chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage(document.getElementsByTagName('html')[0].innerHTML);"});
});

chrome.runtime.onMessage.addListener(function(request) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

如果您对上述代码有任何疑问，请询问。如果您想了解有关chrome.tabs（获取有关标签的信息）和chrome.runtime（在您的扩展程序的不同部分之间发送消息）的更多信息，您可能会发现这些链接很有趣：http://developer.chrome.com/extensions/tabs.html，http://developer.chrome.com/extensions/runtime.html。

Chrome扩展程序 - 在弹出窗口中显示html

2 个答案: