fregante/devtools_page.html

## devtools_page.html
<!DOCTYPE html>
<meta charset="utf-8" />
<script src="devtools_page.js"></script>

## devtools_page.js
chrome.devtools.panels.create("New demo panel", "", "panel.html");

## manifest.json
{
  "manifest_version": 2,
  "version": "0.0.0",
  "name": "Devtools demo",
  "description": "Devtools",
  "optional_permissions": ["*://*/*"],
  "devtools_page": "devtools_page.html"
}

## panel.html
<!DOCTYPE html>
<meta charset="utf-8" />
<button>Request</button>
<script src="panel.js"></script>

## panel.js
document.querySelector("button").addEventListener("click", async () => {
  try {
    await chrome.permissions.request({
      origins: ["https://example.com/*"],
    });
  } catch (error) {
    document.body.append(
      document.createElement("hr"),
      error.name,
      ":  ",
      error.message
    );
  }
});
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<script src="devtools_page.js"></script>
	{
	"manifest_version": 2,
	"version": "0.0.0",
	"name": "Devtools demo",
	"description": "Devtools",
	"optional_permissions": [":///*"],
	"devtools_page": "devtools_page.html"
	}
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<button>Request</button>
	<script src="panel.js"></script>
	document.querySelector("button").addEventListener("click", async () => {
	try {
	await chrome.permissions.request({
	origins: ["https://example.com/*"],
	});
	} catch (error) {
	document.body.append(
	document.createElement("hr"),
	error.name,
	": ",
	error.message
	);
	}
	});