テスト投稿テスト投稿

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

js
1var targetTabId;
2
3chrome.commands.onCommand.addListener(function() {
4  chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
5    targetTabId = tabs[0].id;
6    createNewTab();
7  });
8})
9
10chrome.runtime.onMessage.addListener(
11  async function(message, sender, sendResponse) {
12    if (message === 'copy') {
13      let imageData = await process(targetTabId);
14      chrome.tabs.sendMessage(sender.tab.id, imageData);
15      chrome.tabs.update(sender.tab.id, { 'active' : true });
16    };
17  }
18);
19
20async function process(tabId) {
21  await attachDebugger(tabId)
22          .catch(error => {console.log(error)});
23
24  let pageSize = await getLayoutMetrics(tabId);
25  await setDeviceMetricsOverride(tabId, pageSize);
26
27  let imageData = await captureScreenshot(tabId)
28          .catch(error => {console.log(error)});
29
30  await detachDebugger(tabId)
31          .catch(error => {console.log(error)});
32
33  return imageData;
34}
35
36
37function attachDebugger(tabId) {
38  return new Promise((resolve, reject) => {
39    chrome.debugger.attach({ tabId: tabId }, "1.3", () => {
40      console.log("callback chrome.debugger.attach");
41      chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve();
42    });
43  });
44}
45
46function detachDebugger(tabId) {
47  return new Promise((resolve, reject) => {
48    chrome.debugger.detach({ tabId: tabId }, () => {
49      console.log("callback chrome.debugger.detach");
50      chrome.runtime.lastError ? reject(chrome.runtime.lastError) : resolve();
51    });
52  });
53}
54
55function captureScreenshot(tabId) {
56  return new Promise((resolve, reject) => {
57    chrome.debugger.sendCommand(
58      { tabId: tabId },
59      "Page.captureScreenshot",
60      {
61        format: "jpeg",
62        quality: 100,
63        fromSurface: true,
64      },
65      function (response) {
66        let imageData = "data:image/jpg;base64," + response.data;
67        console.log("callback chrome.debugger.sendCommand");
68        chrome.runtime.lastError ? reject(chrome.runtime.lastError.message) : resolve(imageData);
69      }
70    );
71  });
72}
73
74function getLayoutMetrics(tabId) {
75  return new Promise((resolve, reject) => {
76    chrome.debugger.sendCommand(
77      { tabId: tabId },
78      "Page.getLayoutMetrics",
79      {},
80      function (object) {
81        console.log("---- get layout w: " + object.contentSize.width);
82        console.log("---- get layout h: " + object.contentSize.height);
83        resolve(object.contentSize);
84      }
85    );
86  });
87}
88
89function setDeviceMetricsOverride(tabId, object) {
90  return new Promise((resolve, reject) => {
91    chrome.debugger.sendCommand(
92      { tabId: tabId },
93      "Emulation.setDeviceMetricsOverride",
94      { height: object.height, width: object.width, deviceScaleFactor: 1, mobile: false },
95      function () {
96        console.log("callback setDeviceMetricsOverride");
97        resolve();
98      }
99    );
100  });
101}
102
103
104function createNewTab() {
105  chrome.tabs.create(
106    {
107      'url' : chrome.extension.getURL('capture.html'),
108      'active' : false
109    },
110    function(tab) {
111      console.log("new tabId :" + tab.id);
112    }
113  );
114}
115

js
1{
2  "name": "Hello Extensions",
3  "description": "Base Level Extension",
4  "version": "1.0",
5  "manifest_version": 2,
6  "commands": {
7    "execute_action": {
8      "suggested_key": {
9        "default": "Ctrl+Shift+E"
10      },
11      "description": "Opens hello.html"
12    }
13  },
14  "background": {
15    "scripts":[
16      "background.js"
17    ],
18    "persistent": true
19  },
20  "browser_action":{
21    "default_title":"test",
22    "default_popup":"popup.html"
23  },
24  "permissions": [
25    "debugger", "clipboardWrite", "tabs", "http://*/", "https://*/", "storage", "unlimitedStorage"
26  ]
27}

js
1chrome.runtime.onMessage.addListener(
2  async function(message, sender, sendResponse) {
3    var img = document.getElementById("capture");
4    img.src = message;
5        var bin = atob(img.src.replace(/^.*,/, ''));
6    var buffer = new Uint8Array(bin.length);
7    for (var i = 0; i < bin.length; i++) {
8        buffer[i] = bin.charCodeAt(i);
9    }
10    var blob = new Blob([buffer.buffer], {
11            type: 'image/png'
12    });
13    
14    const item = new ClipboardItem({ "image/png": blob });
15    await navigator.clipboard.write([item]);
16    window.close();
17  }
18);
19
20chrome.runtime.sendMessage("copy")
21
22document.getElementById("button").addEventListener("click", 
23  function copy(){
24    var img = document.getElementById("capture");
25    
26    var bin = atob(img.src.replace(/^.*,/, ''));
27    var buffer = new Uint8Array(bin.length);
28    for (var i = 0; i < bin.length; i++) {
29        buffer[i] = bin.charCodeAt(i);
30    }
31    var blob = new Blob([buffer.buffer], {
32            type: 'image/png'
33    });
34    
35    const item = new ClipboardItem({ "image/png": blob });
36    navigator.clipboard.write([item]);
37  }
38);

html
1<html>
2  <body>
3    <button id="button">
4    <img id="capture" src="" style="width: 60%; height: auto;">
5    <script src="capture.js"></script>
6  </body>
7</html>