munierujp / direct_helper

ビジネスチャットツールdirectに便利な機能を追加するChrome拡張
https://chrome.google.com/webstore/detail/direct-helper/fhbllgfoempopcijliicheinpdbohdic
8 stars 0 forks source link

独自設定画面の追加 #1

Closed munierujp closed 6 years ago

munierujp commented 7 years ago

What

direct helperの設定項目を独自設定画面に表示する。

Why

How

環境設定画面のDOMを参考に、設定画面のDOMを生成する。

munierujp commented 6 years ago

drawSettingView()の処理を以下のようにすればいけそう。

function drawSettingView(){
    const $wrapper = $("#wrap");
    const $settingPage = $(`<div class="page" id="direct_helper-setting-page"></div>`);
    $settingPage.append(`<hr>`);
    $settingPage.append(`<h3 class="page-title"><span class="page-title-glyphicon glyphicon glyphicon-cog"></span>  ${SETTING_DATA.name}</h3>`);
    $settingPage.append(`<div>${SETTING_DATA.description}</div>`);
    SETTING_DATA.sections.forEach(section => appendSettingSection($settingPage, section));
    $wrapper.append($settingPage);
}
munierujp commented 6 years ago

問題は、設定画面のリンクをどこに表示するか(理想はナビゲーションメニュー内の環境設定の下あたりだが、DOM構造的に一意に特定するのが厳しい)

munierujp commented 6 years ago

#navbar-menu .navbar-rightあたりに追加するのがよさそう。

非選択時

<li class=""><a href="javascript:alert('clicked')" title="" id="navbar-menu-direct_helper" class="navbar-menu" data-original-title="direct helper"><span><img src="https://raw.githubusercontent.com/munierujp/direct_helper/master/doc/icon.png" style="height: 100%;"></span> <span class="navbar-menu-text">direct helper</span></a></li>

選択時

<li class="active"><a href="javascript:alert('clicked')" title="" id="navbar-menu-direct_helper" class="navbar-menu" data-original-title="direct helper"><span><img src="https://raw.githubusercontent.com/munierujp/direct_helper/master/doc/icon.png" style="height: 100%;"></span> <span class="navbar-menu-text">direct helper</span></a></li>