当前位置： 文江博客话题详情

如何使用 Chrome 扩展从活动选项卡中获取段落？

发布于 2024-12-09 14:26:16 字数 8978 浏览 0 评论 0原文

在我的 background.html 中，我获取当前选项卡的 id、url 和 title，如下所示：

chrome.tabs.getSelected(null, function(tab) {
  tabId = tab.id;
  tabUrl = tab.url
  tabTitle = tab.title
  ...

我还需要获取当前选项卡的第一段。这可能吗？我在标签页类型中没有看到任何相关内容。感谢

更新

更新响应serg 的回答 并从 此处：

这是 dom.js ：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
   //sendResponse({dom: "The dommmmm that you want to get"});
   sendResponse({dom: document.getElementsByTagName("body")[0]});
   //sendResponse({dom: document.getElementsByTagName("p")});
 else
   sendResponse({}); // Send nothing..
});

这就是我在 background.html 中的内容：

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    console.log(response.dom);
  });

但似乎什么也没有发生。我什至不知道该去哪里看。

更新

manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "background_page": "background.html",
  "content_scripts": [
     {
       "matches": ["http://*/*"],
       "js": ["dom.js"]
     }
   ],  
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs",
    "http://ting-1.appspot.com/submithandlertest"
  ]
}

更新

插入console.logs进行调试，但我在控制台中看不到它们；事实上 dom.js 甚至没有运行，我将“else”错误地拼写为“els”，并且没有给出错误。但除此之外，扩展程序运行良好并执行 xhr 请求。我做错了什么？

dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
    console.log("dom.js - request action")
   sendResponse({dom: document.getElementsByTagName("body")[0]});
   console.log("***dom.js - sendResponse***")
 else
   sendResponse({}); // Send nothing..
   console.log("***dom.js - else***")
});

background.html

<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    console.log(response.dom);
    console.log("background -- where is response.dom")
  });

    tabId = tab.id;
    console.log(tabId)
    tabUrl = tab.url
    console.log(tabUrl)
    tabTitle = tab.title
    console.log(tabTitle)

var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");


var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200){ 
            console.log("request 200-OK");
            chrome.browserAction.setBadgeText ( { text: "done" } );
            setTimeout(function () {
            chrome.browserAction.setBadgeText( { text: "" } );
            }, 2000);
        }else{
            console.log("connection error");
            chrome.browserAction.setBadgeText ( { text: "ERR" } );
     }        
  }        
};
xhr.send(formData);
console.log("tabUrl: "+ tabUrl)
console.log(formData)

        });
    });
</script>
</html>

编辑

按照serg的建议编辑了background.html，以包装所有需要的代码它进入 chrome.tabs.sendRequest 回调（所有这些 xhrs）”。但这个版本的后台不行。我没有收到任何错误消息，但什么也没有发生。我做错了什么？

<html>
    <script>
        chrome.browserAction.onClicked.addListener(function(tab) 
        {
            //chrome.tabs.getSelected(null, function(tab) 
            //{
            // Send a request to the content script.
            chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) 
            {
                console.log(response.dom);
                console.log("background -- where is response.dom")
                //}); moving this down to include xhr
                tabId = tab.id;
                console.log(tabId)
                tabUrl = tab.url
                console.log(tabUrl)
                tabTitle = tab.title
                console.log(tabTitle)

                var formData = new FormData();
                formData.append("url", tabUrl);
                formData.append("title", tabTitle);
                formData.append("pitch", "this is a note");
                //formData.append("user_tag_list", "tag1, tag2");

//xhr*********************************************************************************        
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
                xhr.onreadystatechange = function (aEvt) 
                {
                    if (xhr.readyState == 4) 
                    {
                        if (xhr.status == 200)
                        { 
                            console.log("request 200-OK");
                            chrome.browserAction.setBadgeText ( { text: "done" } );
                            setTimeout(function () 
                            {
                                chrome.browserAction.setBadgeText( { text: "" } );
                            }, 2000);
                        }
                        else
                        {
                            console.log("connection error");
                            chrome.browserAction.setBadgeText ( { text: "ERR" } );
                        }        
                    }        
                };
                xhr.send(formData);
                console.log("tabUrl: "+ tabUrl)
                console.log(formData)
//xhr**********************************************************************************                
            }); //chrome.tabs.sendRequest
        });
    </script>
</html>

更新：已编辑 dom.js：

chrome.extension.onRequest.addListener
(
    function(request, sender, sendResponse) 
    {
        if (request.action == "getDOM")
        {
            console.log("dom.js - if (request.action == getDom)")
            //sendResponse({dom: "The dommmmm that you want to get"});
            //sendResponse({dom: document.getElementsByTagName("body")[0]});

            sendResponse({dom: document.getElementsByTagName("p")[0]});
            console.log("***dom.js - sendResponse***")
            //var pageInfo = {
            //"title": document.title};
            //chrome.extension.sendRequest(pageInfo);
        }
        else
        {
            sendResponse({}); // Send nothing..
            console.log("***dom.js - else***")
        }
    }
);

使用显示标记的 console.log 更新最新的 background.html：

<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    //NOT SHOWING
    console.log(response.dom)
    //NOT SHOWING
    console.log("background -- where is response.dom")
  });

    tabId = tab.id;
    //SHOWING
    console.log(tabId)
    tabUrl = tab.url
    //SHOWING
    console.log(tabUrl)
    //SHOWING
    tabTitle = tab.title
    //SHOWING
    console.log(tabTitle)

var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200){
            //SHOWING 
            console.log("request 200-OK");
            chrome.browserAction.setBadgeText ( { text: "done" } );
            setTimeout(function () {
            chrome.browserAction.setBadgeText( { text: "" } );
            }, 2000);
        }else{
            //NOT SHOWING
            console.log("connection error");
            chrome.browserAction.setBadgeText ( { text: "ERR" } );
     }        
  }        
};
xhr.send(formData);
//SHOWING
console.log("tabUrl: "+ tabUrl)
//SHOWING
console.log(formData)

        });
    });
</script>
</html>
原文

In my background.html I am getting the id, url, and title of the current tab like this:

chrome.tabs.getSelected(null, function(tab) {
  tabId = tab.id;
  tabUrl = tab.url
  tabTitle = tab.title
  ...

I also need to get the first paragraph of the current tab. Is this possible? I don't see anything related in the tab type. Thanks

Update

Update in response to serg's answer and copying the code from here:

This is dom.js:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
   //sendResponse({dom: "The dommmmm that you want to get"});
   sendResponse({dom: document.getElementsByTagName("body")[0]});
   //sendResponse({dom: document.getElementsByTagName("p")});
 else
   sendResponse({}); // Send nothing..
});

and this is what I have in background.html:

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    console.log(response.dom);
  });

But nothing seems to be happenning. I don't even know where to look.

Update

manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "background_page": "background.html",
  "content_scripts": [
     {
       "matches": ["http://*/*"],
       "js": ["dom.js"]
     }
   ],  
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs",
    "http://ting-1.appspot.com/submithandlertest"
  ]
}

Update

Inserted console.logs for debugging but I see none of them in the console; in fact dom.js does not even running, I misspelled "else" as "els" and no error was given. But otherwise the extension works well and executes the xhr request. What am I doing wrong?

dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
    console.log("dom.js - request action")
   sendResponse({dom: document.getElementsByTagName("body")[0]});
   console.log("***dom.js - sendResponse***")
 else
   sendResponse({}); // Send nothing..
   console.log("***dom.js - else***")
});

background.html

<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    console.log(response.dom);
    console.log("background -- where is response.dom")
  });

    tabId = tab.id;
    console.log(tabId)
    tabUrl = tab.url
    console.log(tabUrl)
    tabTitle = tab.title
    console.log(tabTitle)

var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");


var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200){ 
            console.log("request 200-OK");
            chrome.browserAction.setBadgeText ( { text: "done" } );
            setTimeout(function () {
            chrome.browserAction.setBadgeText( { text: "" } );
            }, 2000);
        }else{
            console.log("connection error");
            chrome.browserAction.setBadgeText ( { text: "ERR" } );
     }        
  }        
};
xhr.send(formData);
console.log("tabUrl: "+ tabUrl)
console.log(formData)

        });
    });
</script>
</html>

Edit

Edited background.html as suggested by serg "to wrap all code that needs it into chrome.tabs.sendRequest callback (all those xhrs)". But this version of the background does not work. I don't get any error messages but nothing happens. What am I doing wrong?

<html>
    <script>
        chrome.browserAction.onClicked.addListener(function(tab) 
        {
            //chrome.tabs.getSelected(null, function(tab) 
            //{
            // Send a request to the content script.
            chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) 
            {
                console.log(response.dom);
                console.log("background -- where is response.dom")
                //}); moving this down to include xhr
                tabId = tab.id;
                console.log(tabId)
                tabUrl = tab.url
                console.log(tabUrl)
                tabTitle = tab.title
                console.log(tabTitle)

                var formData = new FormData();
                formData.append("url", tabUrl);
                formData.append("title", tabTitle);
                formData.append("pitch", "this is a note");
                //formData.append("user_tag_list", "tag1, tag2");

//xhr*********************************************************************************        
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
                xhr.onreadystatechange = function (aEvt) 
                {
                    if (xhr.readyState == 4) 
                    {
                        if (xhr.status == 200)
                        { 
                            console.log("request 200-OK");
                            chrome.browserAction.setBadgeText ( { text: "done" } );
                            setTimeout(function () 
                            {
                                chrome.browserAction.setBadgeText( { text: "" } );
                            }, 2000);
                        }
                        else
                        {
                            console.log("connection error");
                            chrome.browserAction.setBadgeText ( { text: "ERR" } );
                        }        
                    }        
                };
                xhr.send(formData);
                console.log("tabUrl: "+ tabUrl)
                console.log(formData)
//xhr**********************************************************************************                
            }); //chrome.tabs.sendRequest
        });
    </script>
</html>

Update: Edited dom.js:

chrome.extension.onRequest.addListener
(
    function(request, sender, sendResponse) 
    {
        if (request.action == "getDOM")
        {
            console.log("dom.js - if (request.action == getDom)")
            //sendResponse({dom: "The dommmmm that you want to get"});
            //sendResponse({dom: document.getElementsByTagName("body")[0]});

            sendResponse({dom: document.getElementsByTagName("p")[0]});
            console.log("***dom.js - sendResponse***")
            //var pageInfo = {
            //"title": document.title};
            //chrome.extension.sendRequest(pageInfo);
        }
        else
        {
            sendResponse({}); // Send nothing..
            console.log("***dom.js - else***")
        }
    }
);

Update with latest background.html with the console.logs that are showing marked:

<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {

  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    //NOT SHOWING
    console.log(response.dom)
    //NOT SHOWING
    console.log("background -- where is response.dom")
  });

    tabId = tab.id;
    //SHOWING
    console.log(tabId)
    tabUrl = tab.url
    //SHOWING
    console.log(tabUrl)
    //SHOWING
    tabTitle = tab.title
    //SHOWING
    console.log(tabTitle)

var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200){
            //SHOWING 
            console.log("request 200-OK");
            chrome.browserAction.setBadgeText ( { text: "done" } );
            setTimeout(function () {
            chrome.browserAction.setBadgeText( { text: "" } );
            }, 2000);
        }else{
            //NOT SHOWING
            console.log("connection error");
            chrome.browserAction.setBadgeText ( { text: "ERR" } );
     }        
  }        
};
xhr.send(formData);
//SHOWING
console.log("tabUrl: "+ tabUrl)
//SHOWING
console.log(formData)

        });
    });
</script>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

巡山小妖精 2024-12-16 14:26:16

您无法从后台页面执行此操作，但可以注入内容脚本 到所有页面，并使用消息传递传回此信息按需到后台页面。

You can't do it from a background page, but you can inject content script to all pages, and use message passing to pass this info back to background page on demand.

回复 原文
~没有更多了~

关于作者

猫烠⑼条掵仅有一顆心

暂无简介

0 文章
0 评论
832 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文