alejandrocoding

try {
    const authorAnchor = document.querySelector('.commit-author') as HTMLAnchorElement;
    const commit = (authorAnchor.nextElementSibling as HTMLAnchorElement).href.split('commit/')[1];

    const p = document.createElement('p');
    p.classList.add('my-commit-msg');
    p.innerText = `Latest commit was: ${commit}`;
    anchorMyBtn.parentNode.parentNode.prepend(p);

} catch {

alejandrocoding

const anchorMyBtn = document.createElement('a');
anchorMyBtn.innerText = 'MY BUTTON';
anchorMyBtn.classList.add('btn', 'ml-2');
anchorMyBtn.href = 'https://google.es/';
anchorMyBtn.target = '_blank';

alejandrocoding

...
  "extractCss": true,
  "vendorChunk": false,
  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/manifest.json"
  ],
  "styles": [
    "src/styles.scss",

alejandrocoding

"content_scripts": [
  {
    "matches": ["*://*.github.com/*"],
    "js": ["contentScript.js", "runtime.js"],
    "css": ["contentStyle.css"]
  }
]

alejandrocoding

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.myBookMark) {
    chrome.bookmarks.getTree((bookmarks) => {   // let's search and try to find if the folder already exists
      const bookmarkBar = bookmarks[0].children.find(bookmark => bookmark.id === '1');   // the bookmar bar is given id '1'
      const existAlready = bookmarkBar.children.find(bookmark => bookmark.title === BOOKMARK_FOLDER.title);
      if (!existAlready) {
        addBookMarkFolder()
          .pipe(concatMap((folder) => addBookMarkLink(folder))) // concat to pass the folder created value down to addBookMarkLink
          .subscribe((result) => sendResponse(result)); // sending as a response the result
      }

alejandrocoding

function addBookMarkFolder(): Observable<chrome.bookmarks.BookmarkTreeNode> {
  return new Observable((observer) =>
    chrome.bookmarks.create(BOOKMARK_FOLDER, (bookMarkFolder) =>
      observer.next(bookMarkFolder)
    )
  );
}

function addBookMarkLink(bookMarkFolder: chrome.bookmarks.BookmarkTreeNode): Observable<string> {
  return new Observable((observer) =>

alejandrocoding

export const BOOKMARK_FOLDER: chrome.bookmarks.BookmarkCreateArg = {
  parentId: '1',
  title: 'BookMark!',
} as const;

export const BOOKMARK_LINK: chrome.bookmarks.BookmarkCreateArg = {
  title: 'My first BookMark from Extension!',
  url: 'https://google.es/',
} as const;

alejandrocoding

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.myBookMark) {
    chrome.bookmarks.create(
      {
        parentId: '1',
        title: 'BookMark!',
        url: 'https://google.es/'
      },
      () => sendResponse('I have added my first bookmark!') // This is the response back for the emitter of the message in contentScript.ts
    );

alejandrocoding

console.log('Starting contentScript');

chrome.runtime.sendMessage({ myBookMark: true }, (response) => {
    console.log(response); // this is the response back from the listener in background.ts
});

console.log('Ending contentScript');

alejandrocoding

console.log('Starting contentScript');

chrome.bookmarks.create(
    {
        parentId: null,
        title: 'My first BookMark from Extension!'
    },
    (newFolder) => console.log('added folder: ' + newFolder.title)
);