How to access DOM of all tabs from background script in Chrome extension?

Question

My current code logs Here you go, 1 cookie. in the console of the active tab whenever I click the extension's icon.

How do I make it log the HTML of all tabs, instead?

manifest.json ↓

{
  "manifest_version": 2,
  "name": "My Extension",
  "permissions": [
    "tabs", "activeTab"
  ],
  "background": {
    "persistent": false,
    "scripts": [
      "background.js"
    ]
  },
  "version": "0.1",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_title": "My Extension"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "script.js"
      ]
    }
  ]
}

onClick.js ↓

chrome.runtime.sendMessage('Please send cookies!', async response => {
  console.log(response);
});

background.js ↓

chrome.browserAction.onClicked.addListener(tab => {
  chrome.tabs.executeScript(null, { file: 'onClick.js' });
});

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  sendResponse('Here you go, 1 cookie.');
});

script.js ↓

// nothing

Answer 1

I made an extension that performs a global find-and-replace in all tabs in all inputs and textareas upon enter press and upon tab load.

The Github respository is here .

popup.html ↓

<!DOCTYPE html>
<header>
  <title>Global Replace All</title>
</header>

<body>
  <label>Find:
    <input type="text" id="find" />
  </label>
  <label>Replace:
    <input type="text" id="replace" />
  </label>
  <script src="popup.js"></script>
</body>

</html>

popup.js ↓

'use strict';

const findBox = document.getElementById('find');
const replaceBox = document.getElementById('replace');

chrome.runtime.sendMessage({ message: 'get' }, response => {
  findBox.value = response.find;
  replaceBox.value = response.replace;
});

document.getElementById('find').addEventListener('input', () => {
  const find = findBox.value;
  chrome.runtime.sendMessage({ message: 'setFind', find });
});

document.getElementById('replace').addEventListener('input', () => {
  const replace = replaceBox.value;
  chrome.runtime.sendMessage({ message: 'setReplace', replace });
});

document.addEventListener('keypress', function (e) {
  if (e.keyCode == 13) {
    chrome.runtime.sendMessage({ message: 'replaceAll' });
    window.close();
  }
});

script.js ↓

'use strict';

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message == 'replaceAll') {
    replaceAll(request.find, request.replace);
    sendResponse({ message: 'done ' });
  }
});

window.onload = function () {
  chrome.runtime.sendMessage({ message: 'tabLoaded' }, response => {
    replaceAll(response.find, response.replace);
  });
}

function replaceAll(find, replace) {
  console.log(`Replacing all << ${find} >> with << ${replace} >>.`);
  let myRegExp = new RegExp(find, 'g');
  [].forEach.call(
    document.querySelectorAll('input, textarea'),
    function (e) { e.value = e.value.replace(myRegExp, replace); }
  );
}

background.js ↓

'use strict';

let find = '';
let replace = '';

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  switch (request.message) {
    case 'get':
      sendResponse({ find, replace });
      break;
    case 'setFind':
      find = request.find;
      break;
    case 'setReplace':
      replace = request.replace;
      break;
    case 'tabLoaded':
      sendResponse({ find, replace });
      break;
    case 'replaceAll':
      return replaceAll();
      break;
  }
});

function replaceAll() {
  new Promise(async resolve => {
    let tabList = [];
    chrome.windows.getAll({ populate: true }, windows => {
      windows.forEach(window => {
        window.tabs.forEach(tab => {
          tabList.push(tab);
        });
      });
      resolve(tabList);
    });
  }).then(tabList => {
    tabList.forEach(tab => chrome.tabs.sendMessage(tab.id, { message: 'replaceAll', find, replace }));
  });
  return true; // this means its async
}

manifest.json ↓

{
  "manifest_version": 2,
  "name": "Global Replace All",
  "permissions": [
    "tabs", "activeTab"
  ],
  "background": {
    "persistent": false,
    "scripts": [
      "background.js"
    ]
  },
  "version": "0.1",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_title": "Global Replace All",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "script.js"
      ]
    }
  ]
}

How to access DOM of all tabs from background script in Chrome extension?

Question

1 answers

solution1
1 ACCPTED 2020-05-29 16:43:43

How to access DOM of all tabs from background script in Chrome extension?

Question

1 answers

solution1 1 ACCPTED 2020-05-29 16:43:43

solution1
1 ACCPTED 2020-05-29 16:43:43