google chorme 拡張機能でHTML DOMから情報を取得したい

Question

//background.js
alert(document.documentElement.outerHTML);

chrome.browserAction.onClicked.addListener(function() {
	chrome.tabs.create({url: 'popup.html'}, tab => {});
});

```google chrome の拡張機能を作成しております。
初歩的な問題だと思うのですが、拡張機能のアイコンをクリックした際に現在表示しているページのHTML、もしくはDOMの中から取得したいものがあります。
HTMLはdocument.documentElement.outerHTMLを使用して取得できるのですが、クリックした際に動くbackground.jsのソースが取れてしまうのです。
押すときに表示しているページ、厳密にいうと押す直前に表示しているページのを取得したいのですがどこにどのような記載すればよいのでしょうか？
URLを取得してそれを利用してHTMLを取得するという方法は使用せず行いたいです。

content scriptを利用するとアクセスできると教えて頂いたのですがイマイチ書くポイントが分かりません。
ご教授お願い致します。

Answer 1

以下のコードで、任意のjsファイルを現在のタブのページ上で実行できます(activeTabのpermissionが必要)。ファイル名は自由です。

// contentScript.js を現在のタブで実行する
chrome.tabs.executeScript({
  file: 'contentScript.js'
});

Inject Programmatically - Content Scripts - Google Chrome

アイコンクリック時にこれを実行するようにして、content script 内で DOM Tree にアクセスすればいいと思います。