I am trying to make a Chrome extension, which will monitor GMail and do something when user starts to write a message. After some study of examples and documentation I have figured out that I should do it with declarativeContent, which reacts on page change.

This is what I have done by now.

manifest.json:

{
  "manifest_version": 2,
  "name": "Gmail helper",
  "version": "0.1",
  "permissions": [ "declarativeContent" ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

background.js:

chrome.runtime.onInstalled.addListener (function (details) {
  chrome.declarativeContent.onPageChanged.removeRules (undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules ([{
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: { hostEquals: 'mail.google', schemes: ['https'] },
          css: ["div"]
//          css: ["div[aria-label='Message Body']"]
        })
      ],
      actions: [ new chrome.declarativeContent.RequestContentScript({js: ["content.js"]}) ]
    }]);
  });
});

content.js:

alert ("Test");

My plan was to declare a content script that would trigger on page changes in GMail. I have added a declarative rule, which has pageURL, css and actions defined. According to my understanding content.js should be executed when pageUrl and css content match. However, content.js is not executed.

What am I doing wrong?

Thanks.

I am trying to make a Chrome extension, which will monitor GMail and do something when user starts to write a message. After some study of examples and documentation I have figured out that I should do it with declarativeContent, which reacts on page change.

This is what I have done by now.

manifest.json:

{
  "manifest_version": 2,
  "name": "Gmail helper",
  "version": "0.1",
  "permissions": [ "declarativeContent" ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

background.js:

chrome.runtime.onInstalled.addListener (function (details) {
  chrome.declarativeContent.onPageChanged.removeRules (undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules ([{
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: { hostEquals: 'mail.google.com', schemes: ['https'] },
          css: ["div"]
//          css: ["div[aria-label='Message Body']"]
        })
      ],
      actions: [ new chrome.declarativeContent.RequestContentScript({js: ["content.js"]}) ]
    }]);
  });
});

content.js:

alert ("Test");

My plan was to declare a content script that would trigger on page changes in GMail. I have added a declarative rule, which has pageURL, css and actions defined. According to my understanding content.js should be executed when pageUrl and css content match. However, content.js is not executed.

What am I doing wrong?

Thanks.

• javascript
• css
• google-chrome-extension

3 Answers 3

Running a content script on a site requires permissions for the site, which isn't stated explicitly in the documentation of declarativeContent API, but is deduced by the lack of "This action can be used without host permissions" note, which is present in other actions. The purpose of declarativeContent API is to install extensions from the WebStore without any permission confirmation warning so naturally this API can't grant you access to mail.google.com unless you add it explicitly in your manifest:

"permissions": ["declarativeContent", "https://mail.google.com/"]

From description of your task it looks like you don't need declarativeContent.

You need to add a content script to page if GMail page is open and in content script you need to add a listener to message editor DOM element (or whatever another element you need to track).

Assuming that you know how to do the second, to add content script to GMail page you need to add the following into manifest:

  "content_scripts": [
    {
      "matches": [
        "https://mail.google.com/*"
      ],
      "js": ["content.js"]
    }

You also don't need background script and permissions in this case.

Note: Although you don't need to specify permissions, your extension will require to ask them from the user. During installation, Chrome will warn the user that your extension will have access to all user data on the page to make the user able to cancel installation if he or she does not agree.

In the document description, RequestContentScript is experimental, but it is not. In my test, Chrome version >= 60 is available, but allFrames does not seem to work.

Before using "RequestContentScript", you need to declare host permissions in "permissions".

https://developer.chrome.com/extensions/declarativeContent#type-RequestContentScript