Getting started

Layer logic #

The extension now knows the popup should be available to users on developer.chrome.com and displays a colored button, but needs logic for further user interaction. Update to include the following code.

The updated code adds an event on the button, which triggers a . This turns the background color of the page the same color as the button. Using programmatic injection allows for user-invoked content scripts, instead of auto inserting unwanted code into web pages.

The manifest will need the permission to allow the extension temporary access to the API. This enables the extension to call .

The extension is now fully functional! Reload the extension, refresh this page, open the popup and click the button to turn it green! However, some users may want to change the background to a different color.

Give users options #

The extension currently only allows users to change the background to green. Including an options page gives users more control over the extension’s functionality, further customizing their browsing experience.

Start by creating a file in the directory named and include the following code.

Then register the options page in the manifest,

Reload the extension and click DETAILS.

Scroll down the details page and select Extension options to view the options page.

The last step is to add the options logic. Create a file named in the extension’s directory with the following code.

Four color options are provided then generated as buttons on the options page with onclick event listeners. When the user clicks a button, it updates the color value in the extension’s storage. Since all of the extension’s files pull the color information from this storage, no other values need to be updated.

Create the manifest #

Extensions start with their manifest. Create a file called and include the following code.

The directory holding the manifest file can be added as an extension in developer mode in its current state.

  1. Open the Extension Management page by navigating to .
    • Alternatively, open this page by clicking on the Extensions menu button and selecting Manage Extensions at the bottom of the menu.
    • Alternatively, open this page by clicking on the Chrome menu, hovering over More Tools then selecting Extensions
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the Load unpacked button and select the extension directory.

Ta-da! The extension has been successfully installed. Because no icons were included in the manifest, a generic icon will be created for the extension.

Introduce a user interface #

Extensions can have many forms of a user interface; this one will use a . Create and add a file named to the extension’s directory. This extension uses a button to change the background color.

Like the background script, this file must be declared in the manifest in order for Chrome to present it in the extension’s popup. To do this, add an object to the manifest and set as the action’s .

This popup’s HTML references an external CSS file named . Add another file to the extension’s directory, name it appropriately, and add the following code.

Designation for toolbar icons is also included under in the field. Download the images folder here, unzip it, and place it in the extension’s directory. Update the manifest so the extension knows how to use the images.

Extensions also display images on the extension management page, the permissions warning, and favicon. These images are designated in the manifest under .

If the extension is reloaded at this stage, it will include the provided icon rather than the default placeholder, and clicking the action will open a popup with button with default colors.

The last step for the popup UI is adding color to the button. Create and add a file named with the following code to the extension’s directory.

This code grabs the button from and requests the color value from storage. It then applies the color as the background of the button. Include a script tag to in .

Reload the extension to view the green button.

Manage your extensions

  1. On your computer, open Chrome.
  2. At the top right, click More More tools Extensions.
  3. Make your changes:
    • Turn on/off: Turn the extension on or off.
    • Allow incognito: On the extension, click Details. Turn on Allow in incognito.
    • Fix corruptions: Find a corrupted extension and click Repair. Confirm by clicking Repair extension.
    • Allow site access: On the extension, click Details. Next to “Allow this extension to read and change all your data on websites you visit,” change the extension’s site access to On click, On specific sites, or On all sites.

Remove possible malware

If you repaired an extension but it’s still corrupted, a suspicious program might be changing this extension’s files.

  1. On Windows computers, Check your computer for malware.
  2. On Windows, Mac, or Linux computers, run an antivirus or anti-malware software. Remove any software programs that may be affecting Chrome.
  3. On all computers, repair the extension:
    1. On your computer, open Chrome.
    2. At the top right, click More More tools Extensions.
    3. Find a corrupted extension and click Repair. Confirm by clicking Repair.
  4. If this doesn’t work, visit the and share your situation with us.

Let extensions read and change site data

Some extensions need permission to read and change site data. You can change your extensions’ permissions anytime.

  1. On your computer, open Chrome .
  2. At the top right, click Extensions .
  3. Click More point to «This can read and change site data.»
  4. Decide which permission to give the extension:
    • When you click the extension: This setting only allows the extension to access the current site in the open tab or window when you click the extension. If you close the tab or window, you’ll have to click the extension to turn it on again.
    • On : Allow the extension to automatically read and change data on the current site.
    • On all sites: Allow the extension to automatically read and change data on all sites.

Add or remove access to a specific site

  1. On your computer, open Chrome.
  2. At the top right, click More More tools Extensions.
  3. On the extension, click Details.
  4. Under “Permissions,” add or remove a site:
    • Add: To the right of “Allowed sites,” click Add.
    • If you don’t see this option, change “Allow this extension to read and change all your data on websites you visit” to On specific sites.
    • Remove: To the right of the site, tap More  Remove.

Add instruction #

Although the extension has been installed, it has no instruction. Introduce a background script by creating a file titled , or downloading it here, and placing it inside the extension directory.

Background scripts, and many other important components, must be registered in the manifest. Registering a background script in the manifest tells the extension which file to reference, and how that file should behave.

The extension is now aware that it includes a non-persistent background script and will scan the registered file for important events it needs to listen for.

This extension will need information from a persistent variable as soon as it’s installed. Start by including a listening event for in the background script. Inside the listener, the extension will set a value using the storage API. This will allow multiple extension components to access that value and update it.

Most APIs, including the storage API, must be registered under the field in the manifest for the extension to use them.

Navigate back to the extension management page and click the Reload link. A new field, Inspect views, becomes available with a blue link, background page.

Click the link to view the background script’s console log, «»

Give users options #

The extension currently only allows users to change the background to green. Including an options page gives users more control over the extension’s functionality, further customizing their browsing experience.

Start by creating a file in the directory called and include the following code, or download it here.

Then register the options page in the manifest,

Reload the extension and click DETAILS.

Scroll down the details page and select Extension options to view the options page, although it will currently appear blank.

Last step is to add the options logic. Create a file called in the extension directory with the following code, or download it here.

Four color options are provided then generated as buttons on the options page with onclick event listeners. When the user clicks a button, it updates the color value in the extension’s global storage. Since all of the extension’s files pull the color information from global storage no other values need to be updated.

Take the next step #

Congratulations! The directory now holds a fully-functional, albeit simplistic, Chrome extension.

What’s next?

  • The Chrome Extension Overview backs up a bit, and fills in a lot of detail about the Extensions architecture in general, and some specific concepts developers will want to be familiar with.
  • Learn about the options available for debugging Extensions in the debugging tutorial.
  • Chrome Extensions have access to powerful APIs above and beyond what’s available on the open web. The chrome.* APIs documentation will walk through each API.
  • The developer’s guide has dozens of additional links to pieces of documentation relevant to advanced extension creation.

Install an extension

Important: You can’t add extensions when you browse in Incognito mode or as a guest.

  1. Open the Chrome Web Store.
  2. Find and select the extension you want.
  3. Click Add to Chrome.
  4. Some extensions will let you know if they need certain permissions or data. To approve, click Add extension

    Important: Make sure you only approve extensions that you trust.

    .

To use the extension, click the icon to the right of the address bar.

If you’re using a computer through your work or school, your organization might block some extensions.

Install on your phone

  1. On your phone, open the Chrome app . If you haven’t yet, sign in to Chrome.
  2. Find the extension you want.
  3. Tap Add to Desktop.
  4. Confirm by tapping Add to Desktop.

The next time you open Chrome on your computer, you’ll see a message that the extension was installed. If the extension needs some permissions, you’ll be asked. To approve, click Enable extension.

Install with a Windows or Mac application

Sometimes, when you install an application on Windows or Mac, it also installs a Chrome extension. The next time you open Chrome:

  • To grant permissions and use the extension, click Enable.
  • To delete the extension, click Remove.

Layer logic #

The extension now has a custom icon and a popup, and it colors the popup button based on a value saved to the extension’s storage. Next, it needs logic for further user interaction. Update by adding the following to the end of the file.

The updated code adds a event listener to the button, which triggers a . This turns the background color of the page the same color as the button. Using programmatic injection allows for user-invoked content scripts, instead of auto inserting unwanted code into web pages.

The manifest will need the permission to allow the extension temporary access to the current page, and the permission to use the Scripting API’s method.

The extension is now fully functional! Reload the extension, refresh this page, open the popup and click the button to turn it green! However, some users may want to change the background to a different color.

Methods

getBackgroundPage

Foreground only

Returns the JavaScript ‘window’ object for the background page running inside the current extension. Returns null if the extension has no background page.

Returns

return
Window optional

getExtensionTabs

Manifest V2 Foreground only Deprecated

Please use .

Returns an array of the JavaScript ‘window’ objects for each of the tabs running inside the current extension. If is specified, returns only the ‘window’ objects of tabs attached to the specified window.

windowId
number optional

Deprecated

Returns

return
Window[]

Deprecated
Array of global window objects

getURL

Manifest V2 Deprecated 58+

Please use .

Converts a relative path within an extension install directory to a fully-qualified URL.

path
string

Deprecated
A path to a resource within an extension expressed relative to its install directory.

Returns

return
string

Deprecated
The fully-qualified URL to the resource.

getViews

Foreground only

Returns an array of the JavaScript ‘window’ objects for each of the pages running inside the current extension.

  • fetchProperties
    object optional

    • tabId
      number optional

      Chrome 54+

      Find a view according to a tab id. If this field is omitted, returns all views.

    • type
       optional

      The type of view to get. If omitted, returns all views (including background pages and tabs). Valid values: ‘tab’, ‘notification’, ‘popup’.

    • windowId
      number optional

      The window to restrict the search to. If omitted, returns all views.

Returns

return
Window[]

Array of global objects

isAllowedFileSchemeAccess

Retrieves the state of the extension’s access to the ‘file://’ scheme (as determined by the user-controlled ‘Allow access to File URLs’ checkbox.

isAllowedIncognitoAccess

Retrieves the state of the extension’s access to Incognito-mode (as determined by the user-controlled ‘Allowed in Incognito’ checkbox.

  • callback
    function

    The parameter should be a function that looks like this:

sendRequest

Manifest V2 Deprecated

Please use .

Sends a single request to other listeners within the extension. Similar to , but only sends a single request with an optional response. The event is fired in each page of the extension.

  • extensionId
    string optional

    Deprecated

    The extension ID of the extension you want to connect to. If omitted, default is your own extension.

  • request
    any

    Deprecated

  • responseCallback
    function optional

    Deprecated

    The responseCallback function looks like this:

setUpdateUrlData

Sets the value of the ap CGI parameter used in the extension’s update URL. This value is ignored for extensions that are hosted in the Chrome Extension Gallery.

Events

onRequest

Manifest V2 Deprecated

Please use .

Fired when a request is sent from either an extension process or a content script.

Event

  • listener
    function

    The listener parameter should be a function that looks like this:

    • request
      any

      Deprecated

      The request sent by the calling script.

    • sender

      Deprecated

    • sendResponse
      function

      Deprecated

      Function to call (at most once) when you have a response. The argument should be any JSON-ifiable object, or undefined if there is no response. If you have more than one listener in the same document, then only one may send a response.

      The sendResponse function looks like this:

Manifest V2 Deprecated

Please use .

Fired when a request is sent from another extension.

Event

  • listener
    function

    The listener parameter should be a function that looks like this:

    • request
      any

      Deprecated

      The request sent by the calling script.

    • sender

      Deprecated

    • sendResponse
      function

      Deprecated

      Function to call when you have a response. The argument should be any JSON-ifiable object, or undefined if there is no response.

      The sendResponse function looks like this:

Introduce a user interface #

Extensions can have many forms of a user interface, but this one will use a . Create and add a file titled to the directory, or download it here. This extension uses a button to change the background color.

Like the background script, this file needs to be designated as a popup in the manifest under .

Designation for toolbar icons is also included under in the field. Download the images folder here, unzip it, and place it in the extension’s directory. Update the manifest so the extension knows how to use the images.

Extensions also display images on the extension management page, the permissions warning, and favicon. These images are designated in the manifest under .

If the extension is reloaded at this stage, it will include a grey-scale icon, but will not contain any functionality differences. Because is declared in the manifest, it is up to the extension to tell the browser when the user can interact with .

Add declared rules to the background script with the API within the listener event.

The extension will need permission to access the API in its manifest.

The browser will now show a full-color page action icon in the browser toolbar when users navigate to a URL that contains . When the icon is full-color, users can click it to view popup.html.

The last step for the popup UI is adding color to the button. Create and add a file called with the following code to the extension directory, or downloaded here.

This code grabs the button from and requests the color value from storage. It then applies the color as the background of the button. Include a script tag to in .

Reload the extension to view the green button.

Uninstall an extension

To the right of your address bar, look for the extension’s icon. Right-click the icon and select Remove from Chrome.

If you don’t see the extension’s icon:

  1. On your computer, open Chrome.
  2. At the top right, click More More tools Extensions.
  3. On to the extension you want to remove, click Remove.
  4. Confirm by clicking Remove.

Use extensions on any computer

To use your extensions on any computer, sign in to Chrome.

Arrange on your toolbar

To the right of your address bar, find your extensions’ icons.

  1. On your computer, open Chrome.
  2. Drag the extension’s icon to its new place.

Hide extensions

  • To hide individual extensions:

    1. Right-click the icon.
    2. Select Unpin.
  • To see your hidden extensions: Click Extensions .

Take the next step #

Congratulations! The directory now holds a fully-functional, albeit simplistic, Chrome extension.

What’s next?

  • The Chrome Extension Overview backs up a bit, and fills in a lot of detail about the Extensions architecture in general, and some specific concepts developers will want to be familiar with.
  • Learn about the options available for debugging Extensions in the debugging tutorial.
  • Chrome Extensions have access to powerful APIs above and beyond what’s available on the open web. The chrome.* APIs documentation will walk through each API.
  • The developer’s guide has dozens of additional links to pieces of documentation relevant to advanced extension creation.

Add functionality #

The extension is now installed, but it doesn’t currently do anything because we haven’t told it what to do or when to do it. Let’s fix that by adding some code to store a background color value.

To do this, we will need to create a background script and add it to the extension’s manifest. Start by creating a file named inside the extension’s directory.

Background scripts, like many other important components, must be registered in the manifest. Registering a background script in the manifest tells the extension which file to reference, and how that file should behave.

Chrome is now aware that the extension includes a service worker. When you reload the extension, Chrome will scan the specified file for additional instructions, such as important events it needs to listen for.

This extension will need information from a persistent variable as soon as its installed. Start by including a listening event for in the background script. Inside the listener, the extension will set a value using the storage API. This will allow multiple extension components to access that value and update it.

Most APIs, including the storage API, must be registered under the field in the manifest for the extension to use them.

Navigate back to the extension management page and click the Reload link. A new field, Inspect views, becomes available with a blue link, background page.

Click the link to view the background script’s console log, «»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector