【Chrome拡張機能開発】GitHubでmainブランチにいる時に目立たせて気付きたい

1
/**
2
 * @description Adds a condition row to the conditions table on the page.
3
 * @param {number{}{}} condition - The condition object containing text and background color.
4
 * @param {number{}{}} defaultCond - The default condition object to revert to.
5
 * @param {string} platform - The platform to manage repositories.
6
 * @returns {number{}{}} The condition object that was added.
7
 */
8
function addCondition(condition, defaultCond, platform) {
9
  let $table = $(`#conditions`);
10
  let $condition = $(`<tr class="condition">`);
11
  let $pfName = `<td><p class="platform">${getPfConfig(platform)}</p></td>`;
12
  let color = `<td><input type="text" class="color"></input></td>`;
13
  let $colors = $(`${color}${color}`);
14
  let $default = $(`<td><a href="#" id="default">default</a></td>`);
15
  $condition.append($pfName);
16
  $condition.append($colors);
17
  $condition.append($default);
18
  $table.append($condition);
19

20
  setColorToElement($colors.find(`.color`)[0], condition.txt_color.r, condition.txt_color.g, condition.txt_color.b);
21
  setColorToElement($colors.find(`.color`)[1], condition.bg_color.r, condition.bg_color.g, condition.bg_color.b);
22

23
  // set event handler
24
  $default.click(event => {
25
    setColorToElement($colors.find(`.color`)[0], defaultCond.txt_color.r, defaultCond.txt_color.g, defaultCond.txt_color.b);
26
    setColorToElement($colors.find(`.color`)[1], defaultCond.bg_color.r, defaultCond.bg_color.g, defaultCond.bg_color.b);
27
  });
28
  $(`.color`).colorPicker({
29
    opacity: false,
30
    dark: `#fff`,
31
    light: `#fff`,
32
  });
33
  console.log(`addCondition done.`);
34

35
  return condition;
36
}
37

38
/**
39
 * @description Sets the background color of a DOM element.
40
 * @param {HTMLElement} element - The DOM element to color.
41
 * @param {number} red - The red component of the color.
42
 * @param {number} green - The green component of the color.
43
 * @param {number} blue - The blue component of the color.
44
 * @returns {undefined}
45
 */
46
function setColorToElement(element, red, green, blue) {
47
  let colorRgb = getColorString(red, green, blue);
48
  element.style.backgroundColor = colorRgb;
49
  element.value = colorRgb;
50
  return;
51
}
52

53
/**
54
 * @description Constructs a color string from RGB values.
55
 * @param {number} red - The red component of the color.
56
 * @param {number} green - The green component of the color.
57
 * @param {number} blue - The blue component of the color.
58
 * @returns {string} The RGB color string.
59
 * @throws {TypeError} If any of the color components is not a number.
60
 */
61
function getColorString(red, green, blue) {
62
  [red, green, blue].some(c => {
63
    if (typeof c !== "number") {
64
      throw new TypeError(`A color code must be number type.`);
65
    }
66
    return false;
67
  });
68
  return `rgb(${red}, ${green}, ${blue})`;
69
}

1
/**
2
 * @description Saves the current conditions to Chrome's sync storage.
3
 * @returns {undefined}
4
 */
5
function saveConditions() {
6
  console.log(`saveConditions started.`);
7
  let conditionObj = getConditionObjByClassName(`.condition`, `.color`);
8
  let setting = {
9
    conditions: conditionObj
10
  };
11
  console.log(`save setting: `, setting);
12

13
  chrome.storage.sync.set(setting, function () {
14
    console.log(`chrome.storage.sync.set started.`);
15
    const msg = `saved!`;
16
    console.log(msg);
17
    let $container = $(`#container`);
18
    let $message = $(`<span>${msg}</span>`);
19
    $container.append($message);
20
    setTimeout(function () {
21
      $message.remove();
22
    }, 1000);
23
    console.log(`chrome.storage.sync.set terminated...`);
24
  });
25
  console.log(`saveConditions terminated.`);
26
}
27

28
/**
29
 * @description Generates an array of condition objects for each matching child of the selected parent elements.
30
 * @param {string} parentSelector - The selector for the parent elements.
31
 * @param {string} childSelector - The selector for the child elements.
32
 * @returns {number{}{}{}} An array of condition objects derived from the child elements' background colors.
33
 */
34
function getConditionObjByClassName(parentSelector, childSelector) {
35
  // let conditions = [];
36
  let conditions = {};
37
  $(parentSelector).each(function (i, elem) {
38
    let txtColor = $(elem).find(childSelector)[0].style.backgroundColor;
39
    let txtColorParts = getColorsByRegex(txtColor);
40
    let bgColor = $(elem).find(childSelector)[1].style.backgroundColor;
41
    let bgColorParts = getColorsByRegex(bgColor);
42
    conditions.github = getConditionObj(
43
      ...parseIntAll([txtColorParts[1], txtColorParts[2], txtColorParts[3], bgColorParts[1], bgColorParts[2], bgColorParts[3]])
44
    );
45
  });
46
  return conditions;
47
}
48

49
/**
50
 * @description Creates an object containing text and background color information.
51
 * @param {number} txtRed - The red component of the text color.
52
 * @param {number} txtGreen - The green component of the text color.
53
 * @param {number} txtBlue - The blue component of the text color.
54
 * @param {number} bgRed - The red component of the background color.
55
 * @param {number} bgGreen - The green component of the background color.
56
 * @param {number} bgBlue - The blue component of the background color.
57
 * @returns {number{}{}} An object with `txt_color` and `bg_color` properties.
58
 * @throws {TypeError} If any color component is not a number.
59
 */
60
function getConditionObj(txtRed, txtGreen, txtBlue, bgRed, bgGreen, bgBlue) {
61
  [txtRed, txtGreen, txtBlue, bgRed, bgGreen, bgBlue].some(c => {
62
    if (typeof c !== "number") {
63
      throw new TypeError(`'c' must be number type.`);
64
    }
65
    return false;
66
  });
67
  return {
68
    txt_color: {
69
      r: txtRed,
70
      g: txtGreen,
71
      b: txtBlue,
72
    },
73
    bg_color: {
74
      r: bgRed,
75
      g: bgGreen,
76
      b: bgBlue,
77
    }
78
  }
79
}

1
/**
2
 * @description Asynchronously retrieves setting object from Chrome's storage.
3
 * @returns {Promise<number{}{}{}{}>} A promise that resolves with the setting object containing conditions.
4
 */
5
function getSettingObjFromChromeStorage() {
6
  let defaultSetting = {
7
    conditions: []
8
  };
9
  const colorConfig = getColorConfig();
10
  const defaultTxtColor = colorConfig.github.txt;
11
  const defaultBgColor = colorConfig.github.bg;
12
  const defaultCond = getConditionObj(
13
    defaultTxtColor.r
14
    , defaultTxtColor.g
15
    , defaultTxtColor.b
16
    , defaultBgColor.r
17
    , defaultBgColor.g
18
    , defaultBgColor.b
19
  );
20
  let conditions = { github: JSON.parse(JSON.stringify(defaultCond)) };
21
  return new Promise((resolve, reject) => {
22
    chrome.storage.sync.get(defaultSetting, function (setting) {
23
      console.log(`get setting: `, setting);
24
      if (setting.hasOwnProperty("conditions")) {
25
        console.log(`getSettingObjFromChromeStorage : aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa`)
26
        conditions = setting.conditions;
27
      }
28

29
      console.log(conditions)
30
      console.log(`getSettingObjFromChromeStorage : bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb`)
31

32
      let condObj = { set_colors: conditions, default_colors: defaultCond };
33
      resolve(condObj);
34
    });
35
  })
36
}