Unable to load Chrome extension with auto BCC functionality

[Mario Lemieux]

Hello,

I am currently working on a Chrome extension that adds auto BCC functionality to Gmail. However, I am facing issues in loading the extension and it is not showing up in the Developer Sources tab.

Here is my current manifest code:

{ "manifest_version": 2, "name": "Auto BCC", "version": "1.0", "description": "Automatically BCCs emails", "permissions": [ "tabs", "storage" ], "background": { "scripts": [ "bccchrome.js" ] } }

And here is the code for the bccchrome.js file:

// bccchrome.js

/**

• Creates a Chrome Extension that auto BCC's emails
• Author: XXX */ console.log('Background script loaded'); // Check if the chrome object is defined if (typeof chrome !== "undefined") { const { runtime, tabs, storage } = chrome;

// Initialize the extension runtime.onInstalled.addListener(() => { // Set a default BCC email storage.sync.set({ bccEmail: 'X...@gmail.com' }); });

// Listen for tab updates tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (tab.url.includes('mail.google.com') && tab.url.includes('/mail/u/0/#compose')) { storage.sync.get('bccEmail', (data) => { const bccEmail = data.bccEmail; tabs.executeScript(tabId, { code: document.querySelector('textarea[name="bcc"]').value = '${bccEmail}'; }); }); } }); }

I am unsure why the code isn't showing up in the Developer Sources tab, and the console.log statement in the bccchrome.js file is not showing up in the console either.

Any help would be appreciated. Thank you in advance.

[Simeon Vincent]

Looks like you're trying to build a Manifest V2 extension. Just to make sure you're aware, Manifest V2 is deprecated and Chrome Web Store no longer accepts uploads of new MV2 extensions.

Okay, back to your question.

First, you won't see the extension's background script in the Sources tab of DevTools when inspecting a page because the extension's background is completely separate from the website. In order to see the console statement logged in bccchrome.js, you will need to navigate to chrome://extensions in a tab, find your extension, then click the "Background page" link. This will open a Chrome DevTools session for your extension's background context.

Second, as you should now be able to see, the tabs.executeScript() call is failing because the extension doesn't have rights to inject scripts on websites.

Unchecked runtime.lastError: Cannot access contents of url "https://mail.google.com/mail/u/0/#inbox?compose=new". Extension manifest must request permission to access this host.

To do so, you'll need to declare host permissions for your extension in manifest.json. For example, if you use the following manifest.json file you'll be able to dynamically inject scripts on mail.google.com.

manifest.json

{

  "manifest_version": 2,

  "name": "Auto BCC",

  "version": "1.0",

  "description": "Automatically BCCs emails",

  "permissions": [

    "tabs",

    "storage",

    "*://mail.google.com/*"

  ],

  "background": {

    "scripts": [

      "bccchrome.js"

    ]

  }

}

Third, I wouldn't recommend injecting content scripts the way you are right now. 

I'd strongly recommend against using tabs.onUpdated() to inject scripts on websites because this event can fire multiple times for a single page. Instead, it would be better to use a static content script declaration in your manifest.json to inject your content script once when the page loads.

manifest.json

{

  "manifest_version": 2,

  "name": "Auto BCC",

  "version": "1.0",

  "description": "Automatically BCCs emails",

  "permissions": [

    "tabs",

    "storage"

  ],

  "background": {

    "scripts": ["bccchrome.js"]

  },

  "content_scripts": [{

    "matches": ["*://mail.google.com/mail/u/*"],

    "js": ["content.js"]

  }]

}

bccchrome.js

console.log('Background script loaded');

// Check if the chrome object is defined

const { runtime, tabs, storage } = chrome;

// Initialize the extension

runtime.onInstalled.addListener(() => {

  // Set a default BCC email

  storage.sync.set({ bccEmail: 'X...@gmail.com'});

});

runtime.onMessage.addListener((message, _sender, sendResponse) => {

  if (message.type == "getBccEmail") {

    // Get the bccEmail from storage and send it to the content script

    storage.sync.get('bccEmail', ({bccEmail}) => sendResponse({bccEmail}));

   

    // Tell the browser this response is async

    return true;

  }

});

content.js

navigation.addEventListener("navigatesuccess", (event) => {

  let url = new URL(event.target.currentEntry.url);

  if (url.hash.includes("compose")) {

    chrome.runtime.sendMessage({type: "getBccEmail"}, (message => {

      console.log(`email: ${message.bccEmail}`);

    }));

  }

});

I changed a couple of things here.

1. In order for the content script to get the BCC address, we have to explicitly pass that data from the background context to the content script.
2. I didn't use the path "/mail/u/0" in the matches pattern because that will ONLY match the first google account the user is logged into. So for example if I logged into both my Chromium account (this one) and my personal account, the path for one account would be "/mail/u/0/" and the other would be "/mail/u/1/".
   
3. I'm using the web platform's Navigation API to detect navigations on the target website rather than the extension platform's WebNavigation API. The extension API will only detect when a document navigates to another document; it does not interact with a single page application's concept of a "navigation" or the web platform's History and Navigation APIs.
   
4. In my brief testing of Gmail I couldn't find any elements that matched the original document.querySelector('textarea[name="bcc"]') call. I've left that part of the demo as an exercise for the reader.

Hope that helps you get on the right path :)

Simeon - @dotproto

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/6c3e6ae0-c8b8-4ae4-b6a8-22644ae2c122n%40chromium.org.