제3자 애드온

소개

384.15 버전부터 Asuswrt-Merlin은 제3자 애드온의 웹 통합을 지원합니다. 기존의 webui 섹션에 새 탭으로 최대 열 개의 사용자 정의 페이지를 추가할 수 있습니다.

또한 nvram과 별도로 애드온을 위한 전용 설정 저장소가 있으며, 따라서 그 제한에 구속받지 않습니다(i.e. 펌웨어 이미지를 다시 컴파일하지 않고도 새 설정을 만들 수 있습니다).

지원은 rc_support nvram 값에 am_addons 플래그의 존재로 감지할 수 있습니다.

위치

/jffs/addons/ 디렉토리가 표준 위치입니다. 여기에 모든 파일을 저장할 디렉토리를 생성해야 합니다. 이 디렉토리의 루트에 파일을 추가하지 마십시오.

모든 애드온에 대한 사용자 정의 설정은 /jffs/addons/custom_settings.txt에 저장됩니다.

사용자 정의 페이지

펌웨어는 최대 20개의 사용자 정의 페이지를 지원합니다(386.1 이전에는 10개였습니다). 이러한 페이지는 부팅 시에 스크립트를 통해 마운트해야 하며, 이는 ideally services-start에서 호출해야 합니다. 사용자 정의 페이지를 /jffs/addons/my_addon/ 폴더에 설치 스크립트와 함께 두어야 합니다. 다음은 Tools 섹션에 새 탭으로 페이지를 삽입할 설치 스크립트의 예입니다.

#!/bin/sh

source /usr/sbin/helper.sh

# Does the firmware support addons?
nvram get rc_support | grep -q am_addons
if [ $? != 0 ]
then
    logger "MyPage" "This firmware does not support addons!"
    exit 5
fi

# Obtain the first available mount point in $am_webui_page
am_get_webui_page /jffs/addons/my_addon/MyPage.asp

if [ "$am_webui_page" = "none" ]
then
    logger "MyPage" "Unable to install Mypage"
    exit 5
fi
logger "MyPage" "Mounting MyPage as $am_webui_page"

# Copy custom page
cp /jffs/addons/my_addon/MyPage.asp /www/user/$am_webui_page

# Copy menuTree (if no other script has done it yet) so we can modify it
if [ ! -f /tmp/menuTree.js ]
then
    cp /www/require/modules/menuTree.js /tmp/
    mount -o bind /tmp/menuTree.js /www/require/modules/menuTree.js
fi

# Insert link at the end of the Tools menu.  Match partial string, since tabname can change between builds (if using an AS tag)
sed -i "/url: \"Tools_OtherSettings.asp\", tabName:/a {url: \"$am_webui_page\", tabName: \"My Page\"}," /tmp/menuTree.js

# sed and binding mounts don't work well together, so remount modified file
umount /www/require/modules/menuTree.js && mount -o bind /tmp/menuTree.js /www/require/modules/menuTree.js

사용자 정의 설정

새로운 nvram 설정은 펌웨어 재빌드 없이 동적으로 추가할 수 없으며, 또한 신규 Broadcom HND 플랫폼의 크기 제한(새 변수는 최대 100바이트의 값을 가짐) 때문에 애드온을 위한 새로운 설정 저장소가 구현되었습니다. /jffs/addons/custom_settings.txt 파일에는 모든 제3자 설정이 포함됩니다. 각 줄에는 다음과 같이 정의된 하나의 설정이 포함됩니다:

setting1 My First Setting
setting2 My Second Setting

변수 이름은 영숫자, 대시(-) 및 밑줄(_) 문자로 제한해야 합니다. 이름의 최대 길이는 29자입니다.

변수 내용은 이론적으로 모든 7비트 ASCII 인쇄 가능 문자를 허용해야 합니다. 내용의 크기 제한은 2999자입니다. 더 복잡한 값이 필요한 경우(예: 줄 바꿈이 있는 문자열), base64 인코딩을 사용하거나 데이터를 별도의 파일로 이동하는 것이 좋습니다(너무 크거나 복잡한 경우). 웹 페이지에서 읽기 액세스가 필요한 경우 /www/user/ 폴더에 이러한 파일을 작성할 수 있다는 점에 유의하세요. 이 경우 고유한 이름을 사용하거나(예: 기존의 네임스페이스를 재사용) 데이터를 하위 디렉토리에 저장하도록 하십시오.

전체 저장소의 최대 총 크기는 8KB입니다. 이러한 크기 제한으로 인해, 거기에 많은 양의 데이터를 저장하지 않도록 노력하십시오 - 필요한 경우 별도의 파일을 사용하십시오. 더 커지면, 웹 서버에서 처리할 때 설정이 잘릴 것입니다.

모든 애드온이 동일한 저장소를 공유하게 되므로, 설정을 쉽게 식별할 수 있도록 네임스페이스를 정의해야 합니다. 이는 다음과 같이 보일 것입니다:

my_addon_version 3.0.2
my_addon_state enabled
diversion_version 2.0
diversion_whitelist /jffs/addons/diversion/my-whitelist.txt

쉘 사용

쉘 스크립트 조작을 위해, helper.sh는 내용을 검색하고 저장하는 함수 쌍을 제공합니다.

# set a value
am_settings_set addon_title Cool Addon 1.0
# retrieve it, in the $TITLE variable
TITLE=$(am_settings_get addon_tittle)

웹 사용법

웹 통합을 위해 페이지의 시작 부근에 다음을 삽입하여 페이지 내에서 이러한 설정에 자바스크립트 객체로 액세스할 수 있습니다:

var custom_settings = <% get_custom_settings(); %>;

HTML 섹션에서 nvram 설정을 사용하는 필드처럼 입력 필드를 정의합니다:

<tr>
   <th>Diversion path</th>
   <td>
      <input type="text" maxlength="100" class="input_25_table" id="diversion_whitelist" autocorrect="off" autocapitalize="off">
   </td>
</tr>

또한 설정을 적용할 때 설정을 다시 전송하는 데 사용되는 숨겨진 amng_custom 입력 필드를 정의합니다:

<input type="hidden" name="amng_custom" id="amng_custom" value="">

그런 다음 initial() 함수에서 객체에서 값을 검색하고 필드에 할당합니다:

    if (custom_settings.diversion_whitelist == undefined)
        document.getElementById('diversion_whitelist').value = "/jffs/addons/diversion/diversion-white.txt";
    else
       document.getElementById('diversion_whitelist').value = custom_settings.diversion_whitelist;

사용자가 적용 버튼을 클릭할 때 호출되는 apply() 함수에서 필드 값을 검색하고, 객체에 다시 저장하고, 객체를 문자열로 변환하고 숨겨진 amng_custom 필드에 할당한 다음 양식을 제출합니다:

function applySettings(){
        /* Retrieve value from input fields, and store in object */
        custom_settings.diversion_whitelist = document.getElementById('diversion_whitelist').value;

        /* Store object as a string in the amng_custom hidden input field */
        document.getElementById('amng_custom').value = JSON.stringify(custom_settings);

        /* Apply */
        showLoading();
        document.form.submit();
}

사용자 정의 서비스

이러한 설정 변경에 대한 작업을 수행하기 위해 라우터에서 일부 스크립트를 실행해야 할 것입니다. service-event 스크립트는 이를 수행할 수 있는 장소입니다. 라우터에서 인식하지 못하는 이벤트에 대해서도 실행되므로 자체 서비스 핸들러를 설계할 수 있습니다.

페이지에서 서비스를 다시 시작하도록 구성합니다. 예를 들어 "myservice"라고 호출해 봅시다:

<input type="hidden" name="action_script" value="restart_myservice">

/jffs/addons/my_addon/myservice.sh 스크립트를 만들고 이와 같은 내용을 포함시킵니다:

#!/bin/sh

TYPE=$1
EVENT=$2

if [ "$EVENT" = "myservice" -a "$TYPE" = "restart" ]
then
        logger -t "myservice" "Restarting my service..."
        # do your stuff here, access /jffs/addons/custom_settings.txt, etc...
fi

그리고 _/jffs/scripts/service-event_에서 스크립트를 호출합니다:

#!/bin/sh

### MyService start
/jffs/addons/my_addon/myservice.sh $*
### MyService end

참고: 복잡한 스크립트를 시스템 /jffs/scripts/* 스크립트에 추가하지 마십시오. 대신 스크립트를 /jffs/addons/my_addon/ 폴더에 넣고 관련 시스템 스크립트에서 해당 스크립트를 호출합니다. 이렇게하면 시작/종료 줄을 찾아 전체 블록을 제거하고 다른 설치된 애드온에 영향을 주지 않는 제거 프로그램을 쉽게 개발할 수 있습니다.

예제 사용자 정의 페이지

다음은 시작점으로 사용할 수 있는 간단한 예제 페이지입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="icon" href="images/favicon.png">
<title>테스트 페이지</title>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link rel="stylesheet" type="text/css" href="form_style.css">
<script language="JavaScript" type="text/javascript" src="/state.js"></script>
<script language="JavaScript" type="text/javascript" src="/general.js"></script>
<script language="JavaScript" type="text/javascript" src="/popup.js"></script>
<script language="JavaScript" type="text/javascript" src="/help.js"></script>
<script type="text/javascript" language="JavaScript" src="/validator.js"></script>
<script>

var custom_settings = <% get_custom_settings(); %>;

function initial(){
        SetCurrentPage();
        show_menu();

        if (custom_settings.diversion_path == undefined)
                document.getElementById('diversion_path').value = "/tmp/default";
        else
                document.getElementById('diversion_path').value = custom_settings.diversion_path;
}


function SetCurrentPage() {
    /* Set the proper return pages */
    document.form.next_page.value = window.location.pathname.substring(1);
    document.form.current_page.value = window.location.pathname.substring(1);
}

function applySettings(){
        /* Retrieve value from input fields, and store in object */
        custom_settings.diversion_path = document.getElementById('diversion_path').value;

        /* Store object as a string in the amng_custom hidden input field */
        document.getElementById('amng_custom').value = JSON.stringify(custom_settings);

        /* Apply */
        showLoading();
        document.form.submit();
}
</script>

</head>
<body onload="initial();"  class="bg">
<div id="TopBanner"></div>
<div id="Loading" class="popup_bg"></div>
<iframe name="hidden_frame" id="hidden_frame" src="" width="0" height="0" frameborder="0"></iframe>
<form method="post" name="form" action="start_apply.htm" target="hidden_frame">
<input type="hidden" name="current_page" value="MyPage.asp">
<input type="hidden" name="next_page" value="MyPage.asp">
<input type="hidden" name="group_id" value="">
<input type="hidden" name="modified" value="0">
<input type="hidden" name="action_mode" value="apply">
<input type="hidden" name="action_wait" value="5">
<input type="hidden" name="first_time" value="">
<input type="hidden" name="action_script" value="">
<input type="hidden" name="preferred_lang" id="preferred_lang" value="<% nvram_get("preferred_lang"); %>">
<input type="hidden" name="firmver" value="<% nvram_get("firmver"); %>">
<input type="hidden" name="amng_custom" id="amng_custom" value="">

<table class="content" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="17">&nbsp;</td>
<td valign="top" width="202">
<div id="mainMenu"></div>
<div id="subMenu"></div>
</td>
<td valign="top">
<div id="tabMenu" class="submenuBlock"></div>
<table width="98%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<table width="760px" border="0" cellpadding="5" cellspacing="0" bordercolor="#6b8fa3" class="FormTitle" id="FormTitle">
<tr>
<td bgcolor="#4D595D" colspan="3" valign="top">
<div>&nbsp;</div>
<div class="formfonttitle">테스트 페이지 - 사용자 정의 설정</div>
<div style="margin:10px 0 10px 5px;" class="splitLine"></div>
<div class="formfontdesc"><#1838#></div>

<table width="100%" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#6b8fa3" class="FormTable">

        <tr>
                <th>Diversion path</th>
                <td>
                        <input type="text" maxlength="100" class="input_25_table" id="diversion_path" autocorrect="off" autocapitalize="off">
                </td>
        </tr>
</table>
<div class="apply_gen">
        <input name="button" type="button" class="button_gen" onclick="applySettings();" value="적

용"/>
</div>
</form>

<div>
<table class="apply_gen">
<tr class="apply_gen" valign="top">
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="10" align="center" valign="top"></td>
</tr>
</table>
<div id="footer"></div>
</body>
</html>

Addons API - XIYO/asuswrt-merlin.ng-kr GitHub Wiki

제3자 애드온

소개

위치

사용자 정의 페이지

사용자 정의 설정

쉘 사용

웹 사용법

사용자 정의 서비스

예제 사용자 정의 페이지

⚠️ GitHub.com Fallback ⚠️

Addons API - XIYO/asuswrt-merlin.ng-kr GitHub Wiki

제3자 애드온

소개

위치

사용자 정의 페이지

사용자 정의 설정

쉘 사용

웹 사용법

사용자 정의 서비스

예제 사용자 정의 페이지

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️