javascript - Chrome 扩展 : How to get specific information from a page

Question

我会尽量把这个说清楚...

本质上，我想制作一个浏览器操作扩展，将当前访问页面的信息显示到弹出窗口中。例如显示页面标题、URL、图像等)

我是扩展开发的新手，对正在发生的事情感到有点困惑。

我已经完成了 Chrome 教程。请有人指出我正确的方向或给我一个基本的例子。

谢谢

Answer 1

这是你需要的:

当您在 Chrome 上点击您的扩展程序图标时打开一个弹出页面。该页面应该有一段运行的 javascript，它向当前选定选项卡中的内容脚本发送消息，并监听内容脚本发回的回复。像这样的东西:

$(function (){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
      chrome.tabs.sendMessage(tabs[0].id, {action: "getDetails"}, function(details){
             //use details here
      });
    });
});

一个content script，直接注入(inject)主页面(需要在其他信息中提取url的页面)。此内容脚本读取信息并通过 sendMessage api 将其传递到弹出页面。像这样的东西:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
     //get details
     sendResponse(details);          
    });

这是一个 SO 线程，它提到了如何从内容脚本与弹出页面对话:Chrome Extension how to send data from content script to popup.html

喂!