Chrome extension issues

[StreamTitan]

Strictly following the instructions on adding a chrome extension.

1. Manifest file update to reflect the name, description and domain and images changed.

• Edit the manifest.json file. You must adapt the externally_connectable
  URL:

     "matches": [
         "*://your.server.com/*"
     ]
  

2. In Developer mode on Chrome. I have pointed to the updated chrome folder in Jidesha for:
   Extension root directory:

3. I then chose pack as the instructions stated:
   ...go inside Chrome to "chrome://extensions", click on the Developer Mode,
   and "Pack extension". The result is a CRX file and, if you do this for
   the first time, a private key used for later updates.

4. Instead of a CRX file, the result is:
   A private key for specified extension already exists. Reuse that key or delete it first

Where is the key?

[StreamTitan]

changed the name of the folder to chromeext and got past that key issue.

When I then tried again I get:
Invalid match pattern

  '*://mydomain.com*'

[bgrozev]

Invalid match pattern

looks like you're missing a slash

[StreamTitan]

Thanks. It should have been:

    '*://mydomain.com/*'

I was able to create the crx and the pem files but when I did the drag and drop into the chrome extensions (chrome://extensions/) in developer mode, I was not able to "enable" the plugin.
It remains greyed out and unselectable (enable option) with "Not from Chrome Web Store." notice.

[damencho]

When installing the extension like that you need one more field: updat_url ... Look at jitsi/jidesha#36

[StreamTitan]

I was able to set the extension and generated the crx, key and id.

Manifest.json:

  "update_url": "https://mydomain.com/static/updates.xml",

I uploaded the updates.xml. Contents of xml following the example from:
jitsi/jidesha@3504c16

I then updated the www.mydomain.com-config.js and the field
"desktopSharingChromeExtId" from 'null' to the ID
// The ID of the jidesha extension for Chrome.
desktopSharingChromeExtId: pncmgiaoepemmikokjnoogmalaomfnab,

The extension is enabled on my Chrome Extensions but shows "greyed out" (inactive) on my Chrome plugins on browser screen (top right).

Inside Jitsi and an active conference, there is no screen share option.

What else do I need to do to have it work in Jitsi?

[damencho]

I think the extension must not be inactive. You've update in chrome with the extension containing update_url and it is still grey?
desktopSharingChromeExtId should be a string so you need:
desktopSharingChromeExtId: 'pncmgiaoepemmikokjnoogmalaomfnab',

[StreamTitan]

Like you said it needs a string so 'pncmgiaoepemmikokjnoogmalaomfnab' worked and the icon for Desktop Sharing showed inside the conference. "Extension failed to install" notice, but I'm working on that.

I think this may need to be updated to reflect the placing of the id as a string inside quotes as it doesn't state that clearly and the default null value of course had no quotes on it.

You have to write the hash ID into the `desktopSharingChromeExtId`
property of your `/etc/jitsi/meet/<your.server.com>-config.js`.
This way, Jitsi Meet knows what to look for when the user clicks
the "Share screen" button.

Browser caches might need to be refreshed afterwards.

[StreamTitan]

You know that feeling when you head is about to explode?

1. Created a developer account in Google to upload the extension.
2. By Google's instructions - backgound.js, pngs, manifest.json should be zipped and uploaded.
   Google's instructions is for the zip file and the above contents only. No crx file
3. Zip uploaded and then completed the related info about the plugin. Plugin published and is in store.
4. Then I was able to get the ID for the plugin after installing the plugin from the Google webstore and added that ID to the www.mydomain.com-config.js file
5. It was added as a string as instructed earlier:
   // The ID of the jidesha extension for Chrome.
   desktopSharingChromeExtId: 'jodnddodkaoenbjjjjlppkbpondnamic',
6. No update url was added to the mainfest.json and no xml was needed because it was a plugin from the Google extensions webstore and not a manual install.

As is, the plugin is installed and shows on my plugins page as enabled. However, the active enabled plugins (top right on browser) shows the plugin greyed out (inactive). I'm thinking that I need to use Jitsi conference in order for it to be active. So I create a room and try the Screen Share icon which shows as an option.

The result though is Screen Sharing extension failed to install.

My www.mydomain.com-config.js reads

// The ID of the jidesha extension for Chrome.
desktopSharingChromeExtId: 'jodnddodkaoenbjjjjlppkbpondnamic',

// Whether desktop sharing should be disabled on Chrome.
desktopSharingChromeDisabled: false,

So I'm really at a loss now because its confusing. Using the "pack extension" etc option to get the crx file is for manual install. Uploading the extension as Google instructed requires no crx and just the files which were default from Jitsi for the extension.

The only thing that neeed to be changed was the

Edit the `manifest.json` file. You must adapt the `externally_connectable`
URL:

"matches": [
    "*://your.server.com/*"
]

Do not include any port information.

I am at a loss because the plugin is greyed out (inactive) and the Jitsi conference is saying its not installed.

[StreamTitan]

Trying to go through this logically.
If you're putting the extension in the Google webstore, you can't do the crx file way eg.
https://github.com/jitsi/jidesha/blob/master/chrome/README.md

The reason being that the Google webstore upload for extensions states the manifest.json, background.js and png files, only and as a zip file. It states no crx file and I understand why because the crx file would have come from a manual install (pack extension) and have a different id than the only you would get from the webstore for the extension.

The id required for the www.mydomain.com-config.js is to tie to the extension and it makes sense that the one given by the webstore is the one that you use.

So the only things to change from the jidesha files for the chrome extension would be the matches address and in the www.mydomain.com-config.js, the desktopSharingChromeExtId as a string.

Here we can see that its done.

// Desktop sharing

// Enable / disable desktop sharing
// disableDesktopSharing: false,

// The ID of the jidesha extension for Chrome.
desktopSharingChromeExtId: 'jodnddodkaoenbjjjjlppkbpondnamic',

// Whether desktop sharing should be disabled on Chrome.
desktopSharingChromeDisabled: false,

// The media sources to use when using screen sharing with the Chrome
// extension.
desktopSharingChromeSources: [ 'screen', 'window', 'tab' ],

// Required version of Chrome extension
desktopSharingChromeMinExtVersion: '0.1',

Now I'm wondering if I need the update url, but that can't be because the update url points to a crx file which we don't have since the extension was done through the webstore and there is no crx file from there. This also means no updates.xml file either.

So really and truly I can't logically find a reason why the plugin is not working.
It shows enabled on the extensions page. It shows greyed out on the browser plugin (top right). The screen share icon shows in the conference.

But the result after all of this is the error message: screen sharing extension failed to install.

[damencho]

I suppose you are installing just the chrome folder, you do not include the calendar extension part. So having a grey icon in the toolbar is because the extension does not implement any popup.
https://developer.chrome.com/extensions/browserAction
So this is normal. If you install the extension that includes the calendar integration, it implements popup and will not be grey. I have many extensions that are grey in the toolbar.
Initially, I didn't understand you are seeing it grey in the toolbar, I understood it was grey in the chrome://extensions page.

[StreamTitan]

Thank you. That's exactly what happened. I zipped the chrome folder because it contained the files that the website required.

Is it so that I zip both the chrome folder and the calendar folder and upload these to the webstore?

[StreamTitan]

website = webstore (autocorrect)
On mobile ATM

[damencho]

Nope, enter calendar folder. Execute the make file and it will create a target folder which you need to zip and upload it is a combination of calendar and chrome extension.

[StreamTitan]

The nightmare of Jitsi continues.

I'll walk through the issues faced with adding the extension to the Chrome Webstore.
If you're planning on having the public use of Jitsi with screen sharing, you would want to have to extension in the webstore. This means you would have to create a developer account in order to do so. Once this is done you are then able to upload your extension.

The files you would need for this can be found in here:
https://github.com/jitsi/jidesha

To put an extension in the webstore you do the following process of opening the calendar folder and running the 'make' file (make.sh ). This will build out the files you need for the Chrome extension.

Once you run the make.sh file (just click it) you will then have files:
background.js, png images, manifest.json, jquery.js, meet-calendar.js, popup.html, randomutil.js, roomnamegenerator.js and the css folder with all.css in it.

Now you need to edit the manifest.json

"externally_connectable": {
      "matches": [
        "*://mydomain.com/*"
      ]
  },

At the top of the manifest is the information about your extension. Those are straightforward, just edit the text to reflect your extension name and details.

Once that is done, zip the folder and then upload to the chrome store.
Sounds like that should be it but it isn't. The headaches have just started.

So now you have it in the Chrome store and it becomes public. You then install it and it shows in the toolbar and also in your extensions page as enabled. You now need the hash ID for your extension given to you by Chrome webstore. You can find this hash id in your extensions page IN DEVELOPER MODE (as you have the extension installed), it says in you extension details (for example):

ID: gnkbhifkgaedngockibkciflgcebiapd

To enable the screen sharing on your conference interface you would need to edit the config file for this
/etc/jitsi/meet/www.mydomain.com-config.js

There are 2 lines which need to be modified:

// The ID of the jidesha extension for Chrome.
    desktopSharingChromeExtId: 'gnkbhifkgaedngockibkciflgcebiapd',

// Whether desktop sharing should be disabled on Chrome.
    desktopSharingChromeDisabled: false,

1. So now you have the contents of folder to upload after the make.sh was run.
2. You've edited the manifest.json file
3. You've zipped and uploaded this.
4. You've installed the extension and now have the hash ID
5. You've added that hash id to the www.mydomain.com-config.js so that Jitsi knows what to look for when the user clicks the share button.
6. You've gone to your Jitsi-meet conference and see the screen share button on the menu. You also see your ext ison active in the plugin bar. You're good to go right?

The end result?

"Screen sharing extension failed to install."

Then you'll be in my shoes. Hands on head staring at the screen. Blank stare.

[damencho]

Did you allow inline install when uploading the extension? And also did you verify your site when adding it in the upload screen of the extension?

[StreamTitan]

I did not know that the site verification was needed for this. I have now just done that and re-installed the extension but it was still the same result.

As for inline installation. I had no option for this and not yet sure how to do this?

[StreamTitan]

I'm seeing this example of inline install. I already now have the site verified as well.

https://timleland.com/chrome-extension-inline-installation/

[StreamTitan]

Just noticed the inline install checkbox option.

I have selected it and now trying again

[StreamTitan]

Update:

Deleted the extension which I had installed before from the webstore. I did not understand and neither was aware that clicking the Screen Share icon would also do an install of the extension.
I then cleared my cache and tried again. This time, to install the extension from inside the conference (inline install)

The icon was visible in the conference and 'on-click', it installed the extension.

However, the result was the same with the error message:
"screen sharing extension failed to install"

even though the extension is there on the extensions page and the plugin bar.

[StreamTitan]

you can have a look at www.grouptawk.com
The fact that the inline install is working means that the site has been verified and inline install selected.

[damencho]

I'm not sure that this will work. You access your website using www.grouptawk...
While your extension is verified and mentions "grouptawk.com" which are different URLs. And maybe this is causing your issues. If you just make your service to work using "grouptawk.com" domain will solve your problem.

[damencho]

Or the other way around, make sure your jidesha plugin uses www.grouptawk...

[StreamTitan]

Ok I'll give these a shot

[StreamTitan]

For the Jidesha plugin, the only thing I can see as editable is the mainfest.json

{
  "manifest_version": 2,
  "name": "Grouptawk",
  "description": "Grouptawk Chrome extension that allows you to schedule meetings and stream your 
desktop into Grouptawk conferences.",
  "version": "0.2.8",
  "minimum_chrome_version": "34",
  "icons": {
    "16": "grouptawk-16x16.png",
    "48": "grouptawk-48x48.png",
    "128": "grouptawk-128x128.png"
  },
  "background": {
        "scripts": [ "background.js" ],
        "persistent": true
  },
  "permissions": [
      "desktopCapture", "https://calendar.google.com/*"
  ],
  "externally_connectable": {
      "matches": [
        "*://grouptawk.com/*"
      ]
  },
  "content_scripts": [
    {
      "matches": ["https://calendar.google.com/calendar/*", "https://outlook.live.com/owa/*"],
      "js": ["jquery.js", "RandomUtil.js", "RoomnameGenerator.js", "meet-calendar.js"],
      "css": ["/css/all.css"],
      "all_frames" : false,
      "run_at" : "document_end"
    }
  ],
  "web_accessible_resources": [
    "grouptawk-48x48.png",
    "grouptawk-48x48.png"
  ],
  "browser_action": {
    "default_title": "Create Grouptawk Meetings",
    "default_popup": "popup.html"
  }
}

[StreamTitan]

So what I'll do is start again with the plugin and use the www.grouptawk.com instead of grouptawk.com

[StreamTitan]

Updated manifest.json updated to:

"externally_connectable": {
      "matches": [
        "*://www.grouptawk.com/*"
      ]
  },

The uploaded the zip and again started over.
Selected inline install again and published.
www.grouptawk.com verified of course.
www.grouptawk.com-config.js updated with new hash id

Cleared cached
Inside the conference, on-click on the screen sharing icon, this time it went directly to the error message and no inline install.

Its been 8hrs today trying to get this to work. I'll try again tomorrow. If successful I'll do another tutorial which helped others the last time. At least Jitsi developers can hopefully see things from the our side, its not as "easy" to install as its stated to be and one successful install helps us all because we share to others what needs to be done in the way they can understand. In the end everyone wins, less "issues" to reply to and the Jitsi community grows.

[damencho]

There is no such extension at the moment:
https://chrome.google.com/webstore/detail/hjkkheenmklehhmlndnbdcfepiejjahp

[StreamTitan]

There is. The link you posted leads to:
https://chrome.google.com/webstore/detail/grouptawk/hjkkheenmklehhmlndnbdcfepiejjahp

[StreamTitan]

It now seems to be working!!!

Not sure what happened. Maybe the webstore had not yet established it (even though it was in the webstore as published). But its working.

Will do a tutorial for it in a bit.

Thanks.

[StreamTitan]

Left with one issue. Site crashes when someone joins the room