mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-04-12 06:09:05 +07:00
1229875d30
* Add offscreen dom parsing sample * Don't use offscreen.hasDocument Use clients.matchAll instead. Also fixes a bug in the clipboard example causing the document not to be closed if the passed argument is not a string. * Fix readme and remove accidentally committed popup files.
75 lines
2.9 KiB
JavaScript
75 lines
2.9 KiB
JavaScript
// Copyright 2023 Google LLC
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// https://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
// Once the message has been posted from the service worker, checks are made to
|
|
// confirm the message type and target before proceeding. This is so that the
|
|
// module can easily be adapted into existing workflows where secondary uses for
|
|
// the document (or alternate offscreen documents) might be implemented.
|
|
|
|
// Registering this listener when the script is first executed ensures that the
|
|
// offscreen document will be able to receive messages when the promise returned
|
|
// by `offscreen.createDocument()` resolves.
|
|
chrome.runtime.onMessage.addListener(handleMessages);
|
|
|
|
// This function performs basic filtering and error checking on messages before
|
|
// dispatching the
|
|
// message to a more specific message handler.
|
|
async function handleMessages(message) {
|
|
// Return early if this message isn't meant for the offscreen document.
|
|
if (message.target !== 'offscreen-doc') {
|
|
return;
|
|
}
|
|
|
|
// Dispatch the message to an appropriate handler.
|
|
switch (message.type) {
|
|
case 'copy-data-to-clipboard':
|
|
handleClipboardWrite(message.data);
|
|
break;
|
|
default:
|
|
console.warn(`Unexpected message type received: '${message.type}'.`);
|
|
}
|
|
}
|
|
|
|
// We use a <textarea> element for two main reasons:
|
|
// 1. preserve the formatting of multiline text,
|
|
// 2. select the node's content using this element's `.select()` method.
|
|
const textEl = document.querySelector('#text');
|
|
|
|
// Use the offscreen document's `document` interface to write a new value to the
|
|
// system clipboard.
|
|
//
|
|
// At the time this demo was created (Jan 2023) the `navigator.clipboard` API
|
|
// requires that the window is focused, but offscreen documents cannot be
|
|
// focused. As such, we have to fall back to `document.execCommand()`.
|
|
async function handleClipboardWrite(data) {
|
|
try {
|
|
// Error if we received the wrong kind of data.
|
|
if (typeof data !== 'string') {
|
|
throw new TypeError(
|
|
`Value provided must be a 'string', got '${typeof data}'.`
|
|
);
|
|
}
|
|
|
|
// `document.execCommand('copy')` works against the user's selection in a web
|
|
// page. As such, we must insert the string we want to copy to the web page
|
|
// and to select that content in the page before calling `execCommand()`.
|
|
textEl.value = data;
|
|
textEl.select();
|
|
document.execCommand('copy');
|
|
} finally {
|
|
// Job's done! Close the offscreen document.
|
|
window.close();
|
|
}
|
|
}
|