This is the 10th day of my participation in the August More Text Challenge

Series of articles:

  • Introduction to Browser Plug-ins
  • Manifest V3
  • Essential concept for browser plug-in development – user interaction
  • Essential concepts for browser plug-in development – Common techniques
  • Essential concepts for browser plug-in development – Customizing the browser experience
  • Essential concepts for browser plug-in development – customizing the Web experience
  • Key concepts for browser plug-in development — Experience optimization
  • Browser plug-in development and debugging

Options Pages

The Settings page allows users to customize extensions to better suit their usage habits.

If you want to add a setup page for an extender, you need to register it in the manifest.json. There are two types of setup pages:

  • Full Page Options specifies the Full page setting page. You need to open a TAB.

    Declare the path to the HTML document registered as the Settings page in the option options_page of the configuration list

    {
  // ...
  "options_page": "options.html",}Copy the code

    The user can then right-click the extension icon in the browser toolbar and choose “Options” to open the Settings page

    Or in the extension”details“Page select”Extender options“The Settings page is displayed

  • Embedded Options displays the Embedded Settings page as a modal box.

    💡 the size of the modal box is automatically adjusted according to the content of the page, but sometimes this may not work. In this case, you can provide a minimum size for the page to ensure that the layout is displayed properly.

    Point to the appropriate HTML document path in the configuration list option options_ui.page and set the property option_ui.open_in_tab to false to indicate that the embedded Settings page is used (if set to true, a new TAB opens to display the Settings page).

    {
  // ...
  "options_ui": {
    "page": "options.html"."open_in_tab": false}},Copy the code

    Then the user can right-click the extension icon in the browser toolbar and choose “Options”, it will jump to the details page of the corresponding extension, and open the modal box to show the Settings page; Alternatively, on the Extender Details page, select Extender Options to open the modal box to display the Settings page.

    💡 in chrome extensions page can pass method. The runtime. OpenOptionsPage () open the Settings page

<button id="go-to-options">Go to options</button>
Copy the code
document.querySelector('#go-to-options').addEventListener('click'.function() {
  // Check whether the browser supports this method
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    // If not, manually open the Settings page based on the page path
    window.open(chrome.runtime.getURL('options.html')); }});Copy the code

Both methods allow users to set parameters, but there are some differences:

  • For inline Settings pages, some Tabs related apis are not supported

    • The chrome.tabs.query() method cannot be used to find the corresponding TAB by setting the page URL
    • Open the Settings page, event chrome. Tabs. OnCreated. The addListener () cannot be listening to
    • When setting page reloading, event chrome. Tabs. OnUpdated. AddListener () cannot be listening to

  • Unable to send messages using method chrome.tabs. Connect () and method chrome.tabs. SendMessage (), Chrome but method. The runtime. The connect () method and chrome. Runtime. The sendMessage () is not restricted.

    💡 if Settings page to use chrome. Runtime. The connect () method and chrome. Runtime. The sendMessage () message, the receiver does not read the sender information of sender TAB, Can only read the URL information to the sender (set the path of the page document)

💡 To enable persistent and cross-device synchronization of user Settings, you can use the Storage. sync API provided by Chrome. Remember to register strage permissions in the manifest manifest

Accessibility

Accessibility, also known as A11Y, refers to a set of guidelines designed to make extensions easier to use for people with disabilities, such as shortcut key commands to make extensions easier to use for people with visual impairments, captioning and translation features to help people with visual impairments and foreign languages.

Developers can follow these tips to improve the accessibility of extensions:

  • Build UI controls with the right semantic HTML elements to ensure accessibility. These controls ensure that actions can be accessed through a keyboard (Tab key), and their semantics make them easier for screen readers to understand.

  • If you need to build UI controls using non-semantic HTML elements or JavaScript, you can use WAI-aria, Web Accessibility Initiative – Accessible Rich Internet Applications, a specification developed by the W3C, which adds specified attributes to DOM elements, Let us develop more semantic web applications.

    The 💡 wai-aria attribute does not have any effect on the Web page, but simply exposes the browser to more accessible apis, such as screen readers.

    There are three main features in this specification:

    • Declare the role and functionality of the element, for examplerole="navigation"Indicates that the element is used for navigation
    • Define additional attributes for the element, for examplearia-require=trueInform the user that the form is mandatory
    • Set the state of the element, for examplearia-disable="true"Indicates that the form does not allow input

    💡 The difference between a state and a property is that a property does not change over the lifetime of an application, whereas a state can change programmatically.

    <div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Copy the code

    In the example above, the tabIndex =”0″ attribute allows the element to be focused and navigated by the keyboard in the order determined by the DOM structure; Attribute aria-ActiveDescendant specifies which element’s descendants are highlighted first when the element is in focus.

  • Element focus allows the user to navigate the extension page using only the keyboard. Buttons, menu bars, and other elements should be focused. By default, only anchor tags, buttons, and form controls can be focused by the keyboard, but we can focus any element by adding the tabIndex=”0″ attribute to the element; You can also make the element unfocused by the keyboard by adding the property tabIndex=”-1″ (although you can still focus elem.focus() by JavaScript programming).

  • Shortcuts make it easier for users to navigate the elements of an extension page than to focus them with the Tab key. See the official example of how to navigate using shortcuts. If shortcuts are provided in the extension page, you should inform the user in the Settings page, Options page.

  • The following Settings improve the accessibility of the content

    • Text: Choose the right font and size to ensure readability of text content, and consider the experience of visually impaired users, who may need to set larger fonts and avoid conflicting custom shortcuts with page scaling shortcuts. To ensure a stable version, you should test the zoom to 200% to see if the page still appears properly. You should avoid embedding text into images, which not only makes it impossible to adjust the font, but also makes it unrecognizable to screen readers. If you must embed text in an image, you should include it in the image’s alternative text (the Alt attribute), for guidance see here.

    • Color: The color of the background and content should have sufficient Contrast, which can be checked using the Colour Contrast Check tool. For richly colored charts, you can use Coblis, a color retarder, to see how it looks to people with varying degrees of chromatism, and adjust the color scheme of the charts to make the extension more user-friendly for those people. Consider providing different color themes or allowing custom color schemes for a better user experience.

    • Audio: If the extension requires audio and video to convey information, it should provide captioning and translation capabilities. For guidance on multimedia captioning, see here.

    • Images: Provide alternative text for images, namely the Alt attribute (text content should be used to clarify the purpose of the image, not describe the details of the image), and for placeholders and purely decorative images, leave this value blank or use CSS (not DOM).

      <img src="img.jpg" alt="The logo for the extension">
Copy the code

  • More related resources:

    • Accessibility Technical Documentation
    • A11ycasts with Rob Dodson

Internationalization

Reference:

  • chrome.i18n API

  • Official examples of Internationalization:

    • I18n (MV2 version)
    • News (MV2 version)
    • Examples

Internationalization I18N refers to the ability to switch languages on demand when developing extensions.

💡 About the development of multi-language versions of the software:

  • Internationalization, L18N: Software Internationalization is the software engineering method of enabling feature and code design to handle multiple languages and cultural traditions during software design and document development, so that creation of different language versions does not require redesign of source code.
  • Localization, L10N: The ability to adapt a website, Web application, or any other form of content to a particular language range and culture.

To make internationalization easier for extensions, follow these recommendations:

  • Place all user-visible content (text) in a messages.json document in the corresponding directory to _locales/_localeCode_ (where _localeCode_ is a language code; English, for example, should be en).

    💡 If the project has the _locales directory, you need to declare the default language in the manifest.json option default_locale. You can see the language code here.

    In the messages.json document, it defines the content in the form of key-value pairs. Each key contains a (case-sensitive) item that needs to be internationalized, and the value is an object with the following commonly used properties:

    • attributemessageIs what needs to be displayed
    • (Optional) PropertydescriptionIs a description of the item so as to inform the translator of its meaning.
    // messages.json
{
  "search_string": {
    "message": "hello%20world"."description": "The string we search for. Put %20 between words that go together."
  },
  / /...
}
Copy the code

    💡 keys cannot start with @@. These keys are reserved predefined items. Commonly used predefined message items are as follows:

    The Message keys explain
    @@extension_id The ID of the extender. This message item is also available for non-internationalized extenders, 💡, but not formanifest.json 中
    @@ui_locale The language currently in use
    @@bidi_dir The current text direction,ltrFor words written from left to right,rtlRepresents text written from right to left

    For example, use a static image from an extender as a background in CSS

    body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}
Copy the code

  • The corresponding data can then be used through the message item in other documents of the project:

    • inmanifest.jsonOr CSS document, pass__MEG_messagename__To use the corresponding item of messagemessagename
    • In an extension page or in a JavaScript script, through a methodchrome.i18n.getMessage("messagename")Gets the corresponding itemmessagename

    💡 Each time a new language is added, a message file needs to be added to the _locales/_localeCode_ directory. Each language does not have to contain all the message items defined in the default language.

    The above example is an extension project file structure that supports English, Spanish, and Korean

    The 💡 browser automatically selects which messages.json document to use based on the user’s language Settings and the extension’s default_locale setting

Identity

The extension can be granted access to Chrome user information based on OAuth 2.0, as described in the Chrome.identity API.

💡 An introduction to this authorization mechanism can be found here.

Management

To manage installed and running extensions, refer to the Chrome.management API.