Vous souhaitez offrir quelque chose à vos collègues mais n'avez rien trouver d'original? Développez et offrez leur une extension qui leur facilitera le quotidien. Dans cet atelier nous couvrirons les avantages et possibilités offertes ainsi que des exemples simples et pratiques qui améliorent le quotidien. Préparez vos idées!

1. For Christmas, build your own chrome
extension!
Nicolas Despres
Program Architect
13 Décembre 2023
@
Isdi France

2. Program Architect
Salesforce
Extension Publisher
SF Explorer
Nicolas Despres
#BroForce
How I Met
Web
Extensions

3. Understand the
architecture and
offered
possibilities
Understand the
ecosystem and
most popular apps
Deep dive and
manual to go
further
Yes you can!
Session objectives

5. November
2022
Second
assignment, LWC
+ D3 dataviz to
understand
omnistudio…
Insurance Product
visualisation managed
package developed
for AG2R
Release 1.0
Release 0.1
Compare Flexipage
for AG2R with Santos!
February
2023
June
2023
October
2023
My Journey @Salesforce
today
Release 2.0 and a
new package
Learning about
Web Extensions
march
2023
Unified Design for
Salesforce Setup
Goal!
May
2022
Joined SF, 3
months on
trailhead
About 250 users

6. Agenda
I. What are chrome extensions?
II. Some example
III. Reasons to build your extension
IV. Reasons behind SF Explorer
V. Enough! Show me some code!
VI. Q&A

7. I. What are chrome
extensions?

8. “Web Extensions are software programs
built on web technologies that enable users to
customize the browsing experience.”
It provide things like:
1. Productivity tools.
2. Web page content enrichment.
3. Information aggregation.

9. ChatGPT
“Productivity is a measure of how efficient you are at
what you do. Productivity tools are software designed to
simplify tasks and streamline your work. “

10. ● Easy to develop, only js & html
○ a user experience can be base on the Salesforce
Design System
● Access to OSS ecosystem
● Cors ready
● Multiorg support
● Native UX (shortcuts, storage, panel...)
● Automatic updates
● No need to be admin of your org to
install/use it
● A single installation is enough for all your
orgs
● A fast security review
● Free (5$ to be publisher)
● At your Organization level:
○ required
○ forbidden
○ restricted
Why develop extensions?
Capabilities Deployment
Top reasons
How awesome
is that?!

11. Shortcuts

12. II. Example of some ‘cool’
extensions

13. 180,000 extensions!
Chrome webstore
Legendary

14. Insanulous
Sample ‘cool’ extensions

15. Salesforce user extensions

16. Lightly Intrusive
Very Intrusive Intrusive Intrusive
Non Intrusive
Non Intrusive
Salesforce Admin extensions

17. Inject code into all your page ! Do not inject code or inject code only when you
decide
Admin Extension Categories
Intrusive Non-Intrusive

18. III. Reasons to make your own
extensions

19. ● Doing it to help YOU
● Be more productive
● Learn something new
● Do something that does not exist or no
solution satisfies you
Why develop your own extension?
Good reasons Cautions
Top reasons
● Get ready to be criticized
● Get ready to work extra time

20. Quizz Time

21. IV. Reasons behind SF
Explorer

22. When I discovered salesforce 18 months ago…
How can I compare 2 flexipages?
Can I use a StoryBook to
document my LWC components?
Can I use a dark mode?

23. How I met your mother
S4EP14

24. Principle
Possible Impossible
Dark
Theme
Custom Object
Show API
Name
User
Permission
Dynamic Form

25. Principle
Possible Impossible
Dark
Theme
Custom Object Show API
Name
User
Permission
Dynamic Form
“possimpible”

26. Did you say impossible?

27. Possimpible in action
Show LWC Info

29. Modern Tech
Built on top of React, Typescript and
JSForce.
2
Strong Foundation
WebExtension with Native Multiorg
Support
1
Salesforce UX
Use Salesforce Lightning Design System
together with Browser Native capabilities
4
Advanced Capabilities
Excel like and advanced text edition
capabilities to ease your explorations
3
Non Intrusive
Salesforce Explorer
Tech stack

30. SF Explorer - Advanced Setup
The same setup UI, but better…
Today on pset and custom object but
tomorrow generalized in other entry
points
What about helping the admin with
contextualized info from our orgs?

31. Modern Tech
Built on top of Typescript and dom-chef.
2
Strong Foundation
WebExtension with storage permission
and lightweight footprint
1
Salesforce Embedded
Your setup, but enhanced!
4
Configurable
Select what message you want to add in
the setup screen
3
Intrusive
Salesforce Explorer - Advanced Setup
Tech stack (lighter)

32. Joined Salesforce
A lot to learn and catch up on…
05-2022
LWC Tool for omnistudio
Sent on a 2 weeks audit mission and need to understand
implemented omniscripts -> needed a tool for that…
11-2022
Product Visualisation / Managed Package
Published a managed package and started looking at the app
exchange to publish it
02-2023
Discovering chrome extension
Study Salesforce Inspector and other options. Start implementing
Flexipage Compare for AG2R
05-2023
Version 1.0
A lot of features and difficult for users to understand how to use
the tool without assistance
09-2023
Version 2.0
Improved UX (tab panel)
Full rewrite
11-2023

33. V. Show me some code!

34. Outside of Chrome
UI Background
Toolbar button
badge
Popup window
Option window
Notification
Menu / Option
data
Contents Script
Background Script
Context menu
Web page
JavaScript
HTML
CSS
JavaScript
HTML
CSS
JavaScript
CSS
Service_worker
(JavaScript)
External API
storage
bookmark
chrome.message
notification
runtime.message
runtime.message
Inside of Chrome
External API
alarm
action
browserAction
history
contextMenus
fileSystemProvider
pageCapture
printing
OS
cookie
Chrome Data

36. {
"name": "Salesforce Explorer - Enhanced Setup",
"version": "0.0.4",
"description": "Enhance your Salesforce setup",
"homepage_url": "https://sf-explorer.github.io/documentation/",
"manifest_version": 3,
"author": "Nicolas Despres",
"icons": {
"128": "logo128.png"
},
"permissions": ["storage", "cookies"],
"host_permissions": [
"https://*.salesforce.com/*"
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": [
"https://*.salesforce.com/*newPermissionSet*"
],
"js": ["setup-enhance.js", "force.min.js"],
"all_frames": true
}
]
}
manifest.json

37. Background
data
Contents Script
Background Script
Salesforce page
JavaScript
CSS
Service_worker
(JavaScript)
storage
runtime.message
Inside of Chrome
cookie
Chrome Data

38. chrome.runtime.onMessage.addListener((request, sender,
sendResponse) => {
if (request.message == "getSession") {
chrome.cookies.get({
url: request.sfHost,
name: "sid",
}, sessionCookie => {
sendResponse(sessionCookie.value)
})
return true;
}
return false
})
Contents script
async function getSession(sfHost: string) {
return new Promise<any>(resolve =>
chrome.runtime.sendMessage(
{
message: "getSession",
sfHost
},
resolve)
)
}
export async function jsforce() {
return new (window as any).jsforce.Connection({
instanceUrl: window.location.origin,
accessToken: getSession(window.location.host),
version: '59.0',
})
}
background.js
The rest is DOM
manipulation

40. https://github.com/nicolas-despres/Awesome-Salesforce-WebExtensions/

41. API & Permissions
Hosts

42. Join the
#ExtensionForce!

43. Join the
#BroForce!
“A Bro is always entitled to do
something stupid, as long as the
rest of his Bros are all doing it.”

44. “You can ask the universe for signs all you
want, but ultimately we only see what we
want to see when we’re ready to see it.” — Ted
Mosby
“Sometimes we search for one
thing but discover another.” —
Lily Aldrin
Inspirational Quotes
“Nothing in this world that’s worth having comes easy.”
— Dr. John Beckwith
“Whatever you do in this life, it’s not legendary unless your
friends are there to see it.” — Ted Mosby

45. “A Bro is always entitled to do
something stupid, as long as the
rest of his Bros are all doing it.”
“Whenever I’m sad, I just stop being sad and
be legendary instead.”
“When life gets you down, just remember there’s a whole
world out there waiting for you.”
“When I’m feeling low, I just
remind myself that I’m too
awesome to be sad.”

46. ● Eval is not allowed
● Monaco integration
● JSForce on the browser
Challenges faced
Technical User feedback
● Difficulty to understand how to use it
● To many features…

47. Q&A

48. Merci…