mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-27 13:29:34 +07:00
dc2174377a
* Ignores archived samples * Uses eslint/recommended rules * Runs prettier and eslint (including --fix) pre-commit via husky * Adds new npm scripts: 'lint', 'lint:fix' and 'prettier' * Does not lint inline js code * Fix all prettier and eslint errors * Add custom prettier rules * Apply custom prettier rules * Update readme to explain how to setup the repo * addressed comments
48 lines
2.1 KiB
JavaScript
48 lines
2.1 KiB
JavaScript
// Copyright 2022 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.
|
|
|
|
const article = document.querySelector('article');
|
|
|
|
// `document.querySelector` may return null if the selector doesn't match anything.
|
|
if (article) {
|
|
const text = article.textContent;
|
|
/**
|
|
* Regular expression to find all "words" in a string.
|
|
*
|
|
* Here, a "word" is a sequence of one or more non-whitespace characters in a row. We don't use the
|
|
* regular expression character class "\w" to match against "word characters" because it only
|
|
* matches against the Latin alphabet. Instead, we match against any sequence of characters that
|
|
* *are not* a whitespace characters. See the below link for more information.
|
|
*
|
|
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
|
|
*/
|
|
const wordMatchRegExp = /[^\s]+/g;
|
|
const words = text.matchAll(wordMatchRegExp);
|
|
// matchAll returns an iterator, convert to array to get word count
|
|
const wordCount = [...words].length;
|
|
const readingTime = Math.round(wordCount / 200);
|
|
const badge = document.createElement('p');
|
|
// Use the same styling as the publish information in an article's header
|
|
badge.classList.add('color-secondary-text', 'type--caption');
|
|
badge.textContent = `⏱️ ${readingTime} min read`;
|
|
|
|
// Support for API reference docs
|
|
const heading = article.querySelector('h1');
|
|
// Support for article docs with date
|
|
const date = article.querySelector('time')?.parentNode;
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
|
|
(date ?? heading).insertAdjacentElement('afterend', badge);
|
|
}
|